视网膜显示器上的CSS过滤器：模糊图像

当您对图像应用-webkit过滤器和-webkit过渡并更改悬停时的过滤器时，图像过渡确实很好，但图像变得非常模糊。视网膜显示器上的CSS过滤器：模糊图像

注：这只是发生在视网膜 - 显示 - 在所有与“正常” PPI-显示器，但模糊的，例如一个新的MacBook Pro配备Retina显示屏没有问题。

我的CSS（无供应商前缀）：

img {filter:grayscale(1);filter:saturate(0%);transition:2s ease;width:200px;height:200px} 
img:hover {filter:grayscale(0)}

注：看到效果/错误，我已经设置了过渡期为2秒

我该如何解决这个问题？

编辑：如果我设置：悬停状态过滤：无它的尖锐！ :-)但是当然，转换不再起作用： -/ 只要图像上存在滤镜（即使该值为0或0％），图像在视网膜显示上也会变得模糊（有或没有转换...它只是模糊，一直）。我想这是一个Filter-Bug。

2012-11-12 albuvee

可以链过滤器是这样的： '过滤器：灰度（0.5）模糊（1像素）饱和（2）;'等等..：http://jsfiddle.net/meo/dya2t/9/但我不知道这是否修复你的问题，我没有视网膜屏幕 – meo

@meo：链接过滤器不幸的是没有帮助，thx无论如何 – albuvee

在你的小提琴中饱和度过滤器简单地覆盖灰度。你应该摆脱饱和的。它不会解决锐度问题，但至少你的过滤器将工作:) – robertp

我设法通过向img标签来解决这个问题：

-webkit-transform: translateZ(0);

2013-01-28 13:27:11

我可以证实此解决方法完美。我相信这是正确的答案，因为问题是“我该如何解决这个问题”，而不是“这里有什么问题”:) – mezis

你是怎么解决这个问题的？这太棒了。 – ns1

子元素与-webkit -backface-visibility：hidden;将解决这个问题。

2013-09-13 15:04:13 Chris

这个为我做了诀窍，'''-webkit-transform：translateZ（0）'''没有，谢谢！ – thomasstephn

'-webkit-transform'为我工作，但它削减了图像的边缘;这也工作，但没有剪辑。谢谢！ –

计算器加盟让别人知道，因为我必须找到这一点我自己：这个bug也体现试图铬打印图像时（但不同）。他们把超级像素化！

如果您在Chrome中抛出一个-webkit-filter到PNG无论打印机或打印设置，将打印图像/ s的大小合适，但在70 DPI下采样到。它也可以在打印预览中看到。

-webkit-transform: translateZ(0);固定它。

2016-02-18 18:54:12 Thomassinaaaaaaa

回答