CSS模糊奇怪的阴影效果

Question

我有这个非常奇怪的问题，我不知道导致它的原因。

我有一个大型图片库，我正在使用CSS重新调整为620 x 250像素。当用户将鼠标悬停在图像上时，我会在其中显示包含一些文字的叠加层。我对图像也有一些模糊效果。您可以在此处查看实时工作版本：http://snoriderswest.com/hotshots。

所以，现在我在另一个网站上设置完全相同的东西。但是在随机照片上，它会产生这种超出图像的奇怪阴影。它可能是五分之一的照片。如果我更改任何CSS，它可能会发生完全不同的图像。

另外，我刚刚意识到，它只发生在Safari中。这里有什么正在发生的事情:(确保你在狩猎中查看它！）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

因为blur不是一个非常高性能的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 - 需要身高：250px;

将其修复为safari