滤镜阴影会导致图像模糊

Question

我有一个png图像我想在它下面留下一个微妙的阴影。所以我创建了一个类.drop-shadow

img.drop-shadow{
    -webkit-filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.1));
    filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.1));}

然而，当我将这个类应用于图像时，它变得模糊。您可以在下面的链接中看到此前后的屏幕截图。

是否可以避免这种模糊？我试过了块阴影，但这只适用于矩形图像。

这是应用于图像的另一个css，只是它是相关的。

img {
display: block;
max-width: 200px;
width: 100%;
margin: 1rem auto;
margin-bottom: $body-line-height;
padding-top: 0;}

这是一个让它变得更容易的代码 http://codepen.io/patrickaltair/pen/cHsbj

Answer 1

这似乎是Retina屏幕上-webkit过滤器的错误。

快速修复：将其添加到您的css文件中：

img {
    -webkit-transform: translateZ(0);
}

我无法测试它是否正常工作，因为我没有视网膜屏幕，但如果有，请告诉我。