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

不要将网格作为图形的背景，而是将其设置为围绕它的边框。

将figure的z-index设为负数，使其在grid之下，并设置margin，使其与红色边框重叠，出血边缘不再可见。

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

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