Internet Explorer 没有抗锯齿旋转图像答案

【问题标题】：internet explorer not anti aliasing rotated imageInternet Explorer 没有抗锯齿旋转图像
【发布时间】：2013-05-02 14:14:53
【问题描述】：

我有一个我正在旋转的带有背景图像的 div。以下是我的 css 规则来旋转它：

#services_parallax { 
-webkit-transform:rotate(3.1deg); /* Webkit */
transform: rotate(3.1deg); /* firefox & IE9+ */
/* IE7 & 8 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.998537, M12=-0.054079, M21=0.054079, M22=0.998537, sizingMethod='auto expand'); 
}

问题是在 IE 中，图像的边缘非常块状和锯齿状，而不是平滑的线条，并且似乎没有抗锯齿。有谁知道解决这个问题？在我通过应用 -webkit-backface-visibility: hidden; 对其进行修复之前，它一直在 chrome 中执行此操作。这对 chrome 非常有用，如果存在，我只需要对 IE 进行类似的修复。

要复制此问题，请将以下内容粘贴到 HTML 文件中并在 IE 中查看：

<style type="text/css"> 
#services_parallax { -webkit-transform:rotate(3.1deg); /* Webkit */ 
    transform: rotate(3.1deg); /* firefox & IE9+ */ 
    /* IE7 & 8 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.998537, M12=-0.054079, M21=0.054079, M22=0.998537, sizingMethod='auto expand'); 
    background: url(http://img.netcarshow.com/Pagani-Zonda_R_2009_1600x1200_wallpaper_01.jpg) center center; 
    background-size:100% auto; 
    height:100px; 
    width:700px; 
    margin-top:50px; 
    margin-left:50px; 
} 
</style> 
<div id="services_parallax"></div>

【问题讨论】：

请说明您遇到问题的 IE 版本？ IE 7/8（使用filter）与IE 9/10（使用transform）的工作方式大不相同。
所有版本都有问题
您能否确认您使用的是每个IE版本的真实副本，或者您是否使用兼容模式进行测试？（同样，对于这样的事情，这可能会影响您看到的结果）
我正在使用真正的IE10，使用兼容模式检查IE10和IE9。然后我将 IE Tester 用于 7 & 8
值得一提的是，IE10确实支持-ms-backface-visibility。然而，值得一提的是，这个属性是为3D rotation effects 使用的，所以如果它在 2D 旋转时对 Chrome 产生影响，那么它可能更像是一种 hack，而不是真正的解决方案。但是，如果您对 hack 没问题，您可以尝试像 opacity(0.9999) 这样的 hack。另一种选择是将元素创建为 SVG/VML 图像，在所有浏览器中旋转应该更平滑。

标签： html css internet-explorer rotation transform

【解决方案1】：

为了解决这个问题，我使用了盒子阴影，它似乎可以工作并使边缘平滑

【讨论】：

【解决方案2】：

如果使用 CSS（IE11、10 和 9）强制设置高度和宽度，则抗锯齿功能不适用于大图像。我做了一些（非常）近似的测试，并扣除了 1000 像素以下的抗锯齿工作。

我仍在寻找此问题的官方来源。

【讨论】：

【解决方案3】：

@geoffs3310，我感受到了你的痛苦。

我发现这仍然是 IE11 和其他一些浏览器（iPad 和 Chrome 上的 Safari 以及三星 Galaxy Tab A 上的默认浏览器）的问题。为了解决这个问题，我在包含背景图像的元素上添加了深色背景颜色。我不知道为什么，但它似乎可以解决问题，例如

background-color: black;

如果其他人看到这篇文章，请允许我提出一些我在处理因内容倾斜引起的各种问题时发现的其他修复。请注意，这些都应用于转换后的容器元素。

消除应用倾斜旋转后出现的锯齿状按钮 (kudos)：

transform-style: preserve-3d;

消除使用 <canvas> 的模糊区域 (kudos to Zoltan)。请注意，如果元素上有其他转换，请在单独的行中声明它们而不是简写（从内存中这是为了解决类似的 Safari 问题）：

transform: perspective(0);

还有另一个修复——虽然我的文档缺少修复的内容，但我认为这与 IE 中的卡顿或模糊内容有关——尝试：

outline: 1px solid transparent;

【讨论】：