css - CSS Blur 出现奇怪的阴影效果

Question

我有一些图像 block ，当我将鼠标悬停在该 block 上时，它们的子图像应该会模糊并缩放并带有一个小的过渡效果。它在 Firefox 中运行完美，但在 WebKit 浏览器中，模糊图像的边缘出现了一个奇怪的阴影。

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

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