Weird Shadow-Effekt kommt auf CSS Blur

Question

Ich habe einige Bildblöcke, wenn ich den Block schweben ihr Kind Bild sollte verwischt und mit einem kleinen Übergangseffekt skaliert werden. Es funktioniert perfekt in Firefox, aber in WebKit-Browsern, es gibt einen seltsamen Schatten um den Rand des unscharfen Bildes.

Ich suchte und bekam eine Lösung in another question, dort haben sie mit -webkit-transform: translate3d(0, 0, 0); auf das Element beantwortet, um das Problem zu lösen. Aber als ich die translate3d(0, 0, 0) anwendete, ist der Schatten nicht versteckt und es ist sichtbar wie box-shadow inset bis auf die Maus verlassen. Überprüfen Sie meine Geige und Codes unter

Fiddle

.grid { 
    width: 40%; 
    float: left; 
    padding: 10px; 
    background-color: red; 
    figure { 
     margin: 0; 
     opacity: 1; 
     filter: alpha(opacity=100); 
     overflow: hidden; 
     -webkit-transition: all, 0.3s, linear; 
     -o-transition: all, 0.3s, linear; 
     transition: all, 0.3s, linear; 
     img { 
     max-width: 100%; 
     min-width: 100%; 
     -webkit-transition: all, 0.3s, linear; 
     -o-transition: all, 0.3s, linear; 
     transition: all, 0.3s, linear; 
     -webkit-filter: blur(0); 
     -moz-filter: blur(0); 
     filter: blur(0); 
     -webkit-transform: scale(1) translate3d(0, 0, 0); 
     -moz-transform: scale(1) translate3d(0, 0, 0); 
     -ms-transform: scale(1) translate3d(0, 0, 0); 
     -o-transform: scale(1) translate3d(0, 0, 0); 
     transform: scale(1) translate3d(0, 0, 0); 
     } 
    } 
    &:hover { 
     figure { 
     opacity: 0.55; 
     filter: alpha(opacity=55); 
     img { 
      -webkit-filter: blur(8px); 
      -moz-filter: blur(8px); 
      filter: blur(8px); 
      -webkit-transform: scale(1.06) translate3d(0, 0, 0); 
      -moz-transform: scale(1.06) translate3d(0, 0, 0); 
      -ms-transform: scale(1.06) translate3d(0, 0, 0); 
      -o-transform: scale(1.06) translate3d(0, 0, 0); 
      transform: scale(1.06) translate3d(0, 0, 0); 
     } 
     } 
    } 
    } 

Ist jede Lösung den Schlagschatten-Effekt in WebKit-Browsern zu entfernen. Helfen würde geschätzt werden.

Answer 1

Anstatt der Gitter ist der Hintergrund der Abbildung, machen Sie es zu einem Rand um ihn herum.

den Z-Index der Figur Set negativ, so dass es unter dem Gitter ist und den Rand so eingestellt, dass es die roten Ränder überlappt, und die Blutungskanten nicht mehr visibles.

Auch wenn Sie nicht die negativen Ränder einstellen, ist der Effekt viel besser, weil jetzt die Ränder mit Weiß anstelle von Rot bluten.

* { 
 
    padding: 0; 
 
    bottom: 0; 
 
} 
 
.grid { 
 
    width: 40%; 
 
    float: left; 
 
    padding: 0px; 
 
    border: solid 10px red; 
 
} 
 
.grid figure { 
 
    margin: -10px; 
 
    opacity: 1; 
 
    overflow: hidden; 
 
    transition: all, 0.3s, linear; 
 
    z-index: -1; 
 
    position: relative; 
 
} 
 
.grid figure img { 
 
    max-width: 100%; 
 
    min-width: 100%; 
 
    transition: all, 0.3s, linear; 
 
    -webkit-filter: blur(0); 
 
    filter: blur(0); 
 
    transform: scale(1) translate3d(0, 0, 0); 
 
} 
 
.grid:hover figure { 
 
    opacity: 0.55; 
 
} 
 
.grid:hover figure img { 
 
    -webkit-filter: blur(8px); 
 
    -moz-filter: blur(8px); 
 
    filter: blur(8px); 
 
    transform: scale(1.06) translate3d(0, 0, 0); 
 
}

<aside class="grid"> 
 
    <figure> 
 
    <img src="http://lorempixel.com/500/500/sports/1/" alt=""> 
 
    </figure> 
 
</aside> 
 
<aside class="grid"> 
 
    <figure> 
 
    <img src="http://lorempixel.com/500/500/sports/2/" alt=""> 
 
    </figure> 
 
</aside>