CSS Blur Weird Shadow Effect

Sto avendo questo problema davvero strano che non ho idea di cosa lo stia causando.

Ho una galleria di immagini di grandi dimensioni, che sto ridimensionando a 620 x 250 pixel con CSS. Quando un utente passa sopra l’immagine, mostro una sovrapposizione con del testo al suo interno. Ho anche un po ‘di effetto sfocato sull’immagine. C’è una versione di lavoro dal vivo che puoi dare un’occhiata qui: http://snoriderswest.com/hotshots .

Quindi, ora ho impostato esattamente la stessa cosa su un altro sito. Ma su foto casuali, produrrà questa strana ombra che si estende oltre l’immagine. Succede forse su 1 foto su 5. Se cambio qualche CSS, potrebbe capitare a immagini totalmente diverse.

inserisci la descrizione dell'immagine qui

Inoltre, ho appena capito, succede solo in Safari. Ecco un jsfiddle di cosa sta succedendo: (Assicurati di vederlo in safari!) Http://jsfiddle.net/y60c18fc/

È così imprevedibile che non capisco. Cosa posso fare?

Ecco il mio codice:

Test!

Test!

Test!

Test!

div { width: 620px; height: 250px; overflow: hidden; margin-bottom: 15px; position: relative; } div img { width: 100%; } div:hover img { -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); } div .overlay { display: none; height: 100%; width: 100%; background-color: #fff; opacity: 0.6; position: absolute; top: 0px; color: #000; box-sizing: border-box; -webkit-box-sizing: border-box; font-weight: bold; font-size: 30px; } div:hover .overlay { display: block; }

Poiché la sfocatura non è un filtro css molto performante, è necessario forzare l’accelerazione hardware durante l’applicazione. Applicare una traduzione in 3d è un modo ingegnoso di forzarlo.

Tutto quello che ho fatto per risolvere il tuo problema è stato aggiungere:

 div:hover img { -webkit-transform: translate3d(0, 0, 0); } 

jsFiddle esempio qui: http://jsfiddle.net/y60c18fc/1/

E qui c’è un articolo più approfondito su cosa sta succedendo dietro le quinte: http://blog.kaelig.fr/post/47025488367/css-filters-in-the-real-world

jsfiddle.net/w37jkwLx/

div: hover img – ha bisogno di altezza: 250px;

Risolve il problema in safari