奇怪的阴影效果即将出现在CSS模糊上

Question

我有一些图像块，当我悬停块的子图像应该模糊和缩放一个小的过渡效果。在firefox中效果很好，但是在WebKit浏览器中，模糊图像的边缘出现了一个奇怪的阴影。

我在另一个问题中搜索并得到了解决方案，在那里他们已经回答了使用元素上的-webkit-transform: translate3d(0, 0, 0);来解决问题。但是当我应用translate3d(0, 0, 0)的阴影是不隐藏的，它像box-shadow inset一样可见，直到鼠标离开。检查我的小提琴和代码下面

小提琴

.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-index为负，使其位于网格之下，并设置边距使其与红色边框重叠，并且出血边缘不再可见。

即使你没有设置负边距，效果也会好得多，因为现在边框是白色而不是红色。

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