Weird Shadow effect на CSS Blur

Question

У меня есть некоторые блоки изображения, когда я навешиваю блок, их дочернее изображение должно быть размытым и масштабироваться с небольшим эффектом перехода. Он отлично работает в firefox, но в браузерах WebKit появляется странная тень вокруг края размытого изображения.

Я искал и получил решение в another question, там они ответили с помощью -webkit-transform: translate3d(0, 0, 0); на элемент, чтобы решить проблему. Но когда я применил translate3d(0, 0, 0), тень не скрыта, и она видна как box-shadow inset до тех пор, пока мышь не уйдет. Проверьте свою скрипку и коды ниже

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); 
     } 
     } 
    } 
    } 

ли какое-либо решение, чтобы удалить эффект тени в WebKit браузерах. Помощь была бы оценена.

Answer 1

Вместо сетки быть подоплека фигуры, сделать бордюр вокруг него.

не указан Z-индекс фигуры отрицательна, так что она находится под сетки, и установить поле таким образом, чтобы он перекрывал красную границу, и кровоточащие края уже не видимые объекты.

Даже если вы не установите отрицательные поля, эффект будет намного лучше, потому что теперь границы истекают белым, а не красным.

* { 
 
    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>