Chrome / Firefox 28+ 中的模糊图像答案

【问题标题】：Blurry images in Chrome / Firefox 28+Chrome / Firefox 28+ 中的模糊图像
【发布时间】：2014-06-29 19:11:44
【问题描述】：

我正在制作一个包含大量 css 转换 (rotate:45deg) 的网站，但 blurry 文本/图像几乎没有问题。

我用一个例子做了一个 jsfiddle。 http://jsfiddle.net/4pjsh/

在 Chrome 中，我添加了“硬件加速”来修复动画期间的闪烁/蹩脚效果，但图像和文字现在总是模糊不清。我搜索并尝试了很多东西，但找不到清理它们的方法。

在 Firefox 27- 中，它工作正常，但自从 Mozilla 发布 firefox 28/29 后，当块动画时，图像模糊。在动画结束时，他们干净地回来了。

有人知道如何解决这个问题吗？如果可以的话……

谢谢

【问题讨论】：

标签： css google-chrome firefox css-transitions css-transforms

【解决方案1】：

我删除了所有旋转，并“重新开始”。不知何故，我至少摆脱了 chrome 中的模糊。

http://jsfiddle.net/4pjsh/6/

所以现在，我只是这样旋转：

.gridd .item {
    -webkit-transform: rotate(45deg);
}
.gridd .zonelogo img {
    -webkit-transform: rotate(-45deg);
}
.gridd .item .blockMore p { //You don't need to be this specific
    -webkit-transform: rotate(-45deg)
}

抱歉，只有时间做 -webkit 的：)

【讨论】：