-webkit-transform rotate - Chrome 中的像素化图像答案

【问题标题】：-webkit-transform rotate - Pixelated images in Chrome-webkit-transform rotate - Chrome 中的像素化图像
【发布时间】：2011-07-01 23:32:36
【问题描述】：

在容器 div 上使用 -webkit-transform: rotate(-5deg);，Chrome 会呈现具有锯齿状边缘的图像网格。而在 FF (-moz-transform:) 和 IE (-ms-filter:) 中一切正常 - 请参阅下面的区别。

对此我有什么办法吗？

【问题讨论】：

-webkit- 在 FF 和 IE 中渲染？
使用：-ms-filter 和 -moz-transform
Aha ok :) jsfiddle.net/Kyle_Sevenoaks/RGRey 在我看来在 FF 和 Chrome 中是一样的，Chrome 放大了吗？
没有缩放，文本和其他元素在其他地方似乎都可以 - 它似乎只是在图像上 - 请参见上文
css transform, jagged edges in chrome的可能重复

标签： html css google-chrome transform

【解决方案1】：

我在 Chrome 33 (Windows 7) 上遇到了这个问题。我尝试了此页面上的所有建议修复。苦难接踵而至。我的轮换非常简单：

transform: rotate(40deg);
-moz-transform: rotate(40deg);
-webkit-transform: rotate(40deg);

我找到了this 的答案，经过一些快速实验后，我发现以下组合在 Chrome 中完美运行：

-webkit-backface-visibility: hidden;
outline: 1px solid transparent;

我还没有测试过跨浏览器。我不知道这会引入哪些进一步的错误。你被警告了。希望这可以为某人指明正确的方向。

附注：在我的实验中，我发现-webkit-backface-visibility: hidden;（单独）移除了未转换图像的抗锯齿功能。

【讨论】：

这很好用。 -webkit-backface-visibility 解决了这个问题，但是像素化很烦人。我不确定轮廓规则如何纠正像素化，但我不在乎。这是迄今为止我见过的最好的解决方法。

【解决方案2】：

对我来说，解决问题的是透视 CSS 属性：

-webkit-perspective: 1000;

在我的情况下完全不合逻辑，因为我没有使用 3d 过渡，但仍然有效。

【讨论】：

【解决方案3】：

这是一个已经修复的WebKit bug和the fix shall appear in Chrome 15。

在每个人都更新到 15+ 之前的解决方法是将 -webkit-backface-visibility: hidden; 应用于正在旋转的元素。为我工作。这会触发元素的抗锯齿。

【讨论】：

这对我有用，看起来背面可见性会触发抗锯齿从 Chrome 23 开始，此错误在 Windows 7 上的 Chrome 中未修复
Chrome 33、Windows 7 - 仍然是个问题...请看我的回答。

【解决方案4】：

你试过CSS规则-webkit-transform-style: preserve-3d;吗？

您也可以尝试使用-webkit-transform: rotateZ(-5deg); 旋转特定轴。

【讨论】：

不，我没有尝试过，但它似乎没有任何明显的效果。欢呼吧。

【解决方案5】：

-webkit-transform: rotate(-5deg) translate3d( 0, 0, 0);

对 chrome 有用。

【讨论】：

【解决方案6】：

您可以查看问题的答案css transform, jagged edges in chrome

帮了我一把

从接受的答案：

以防万一有人稍后搜索此内容，这是一个摆脱困境的好技巧 Chrome 中 CSS 转换的锯齿状边缘是添加 CSS 属性 -webkit-backface-visibility 的值为 hidden。在我自己的测试中，这完全消除了它们。希望有帮助。

【讨论】：

有效！他们真的应该修复这个错误，即使它被标记为“已修复”，这显然不是由于您在应用上述 css 属性时注意到的差异。
此解决方案如果来回旋转，可能会导致旋转图像中出现透明的“死”像素。

【解决方案7】：

您可以在图像中添加与背景颜色相同的 box-shadow，从而降低效果。

示例： http://antialiasing-webkit.qip.li/edit/

【讨论】：

这是在 Chrome 47.0.2508.0（最新开发版本）中旋转图像时完全停止像素化的唯一解决方案。此处列出的其他答案似乎使问题变得更糟，backface-visibility: hidden 导致图像在动画期间和动画停止后出现像素化边缘。

【解决方案8】：

这并不适用于所有用途，但是如果您可以控制标记并且不介意添加额外的

，您可以利用生成的内容来显着清理旋转图像的边缘铬合金。这是可行的，因为 Chrome 将对放置在图像上的生成内容应用抗锯齿。

您可以在此处查看示例：http://jsfiddle.net/cherryflavourpez/2SKQW/2/

第一个图像没有做任何处理，第二个应用了一个边框以匹配背景颜色 - 我看不到任何差异。

第三个图像 div 有一些生成的内容，边缘周围有一个边框。你在边缘丢失了一个像素，但它看起来好多了。 CSS 是不言自明的。这样做的好处是不需要您在图像中创建边框，这对我来说似乎代价太大。

【讨论】：

显然最新的 Chrome 开发版本已经退步，这个技巧不再有效。更多搜索出现了这一行：-webkit-transform-style:preserve-3d;这似乎可以解决问题。

【解决方案9】：

这似乎是 webkit 引擎中的 Antialiasing 错误。 A report has been filed but is as yet unsolved。

您可以尝试添加与背景颜色相同的边框，以尽量减少效果。

【讨论】：

好的，谢谢，最初我确实有边框，但希望没有边框，但确实会降低效果
没问题，很高兴它有帮助:)
在最初的设计中，白色的 CSS 边框有很大帮助，但在这个版本中，黑色的边框并没有太大帮助。但是通过给实际的图像文件一个 2px 的黑色边框，问题就解决了。
在最后一条评论here 中，您可以看到通过 GPU 发送元素可以获得解决方法。你必须这样做：rotate(90deg) translateZ(0)
可以-webkit-transform: translateZ(0px);与其他浏览器有任何兼容性问题吗？ @Julio