CSS模糊怪异的阴影效果(CSS Blur Weird Shadow Effect)

我在这个非常奇怪的问题，我不知道是什么导致了它。

我有大图像画廊，我正在重新调整大小以620×250像素，CSS。 当用户将鼠标悬停在图片中，我告诉在它的一些文字覆盖。 我也有一点的图像上的模糊效果。 还有，你可以看看这里的现场工作版本： http://snoriderswest.com/hotshots 。

所以，现在我设置完全一样的事情了其他网站上。 但在随机的照片，它会产生超出这个图片的真是奇怪的影子。 它发生在1可能在5张照片。 如果我改变任何CSS，它可能发生在完全不同的图像。

另外，我才意识到，这只是发生在Safari。 这里是发生了什么事情的的jsfiddle：（！确保你在野生动物园观看） http://jsfiddle.net/y60c18fc/

这只是如此不可预测，我不明白。 我能做什么？

这里是我的代码：

<div>
    <img src="https://assets.crowdsurge.com/datacapture/example/img/example_logo.png" class="gallery">
    <div class="overlay">
        <h2>Test!</h2>
    </div>
</div>

<div>
    <img src="https://assets.crowdsurge.com/datacapture/example/img/example_logo.png" class="gallery">
    <div class="overlay">
        <h2>Test!</h2>
    </div>
</div>

<div>
    <img src="https://assets.crowdsurge.com/datacapture/example/img/example_logo.png" class="gallery">
    <div class="overlay">
        <h2>Test!</h2>
    </div>
</div>

<div>
    <img src="https://assets.crowdsurge.com/datacapture/example/img/example_logo.png" class="gallery">
    <div class="overlay">
        <h2>Test!</h2>
    </div>
</div>


div {
  width: 620px;
  height: 250px;
  overflow: hidden;
  margin-bottom: 15px;
  position: relative;
}

div img {
  width: 100%;  
}

div:hover img {
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
}

div .overlay {
  display: none;
  height: 100%;
  width: 100%;
  background-color: #fff;
  opacity: 0.6;
  position: absolute;
  top: 0px;
  color: #000;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  font-weight: bold;
  font-size: 30px;
}

div:hover .overlay {
  display: block;
}

Answer 1:

因为模糊是不是一个非常高性能的CSS滤镜，你需要应用时，它迫使硬件加速。 应用3D转换是迫使它的一个极好的方法。

我所做的一切，以解决您的问题进行补充：

div:hover img {
    -webkit-transform: translate3d(0, 0, 0);
}

这里的jsfiddle例如： http://jsfiddle.net/y60c18fc/1/

这里是正在发生的事情在幕后更深入的文章： http://blog.kaelig.fr/post/47025488367/css-filters-in-the-real-world

Answer 2:

jsfiddle.net/w37jkwLx/

DIV：悬停IMG - 需要高度：250像素;

修复它在Safari

文章来源: CSS Blur Weird Shadow Effect