css transform，chr​​ome中的锯齿边 [英] css transform, jagged edges in chrome

问题描述

问题是，Chrome的边框看起来像是锯齿状的，像是一个低分辨率）游戏没有抗锯齿。在IE，Opera和FF看起来好多了，因为AA被使用（它仍然是清晰可见，但不是那么糟糕）。我无法测试Safari，因为我没有Mac。

旋转的照片和文字本身看起来不错，只有边框看起来有锯齿。 p>

我使用的CSS是这样：

  .rotate2deg {
 transform：rotate（2deg）; 
 -ms-transform：rotate（2deg）; / * IE 9 * / 
 -webkit-transform：rotate（2deg）; / * Safari和Chrome * / 
 -o-transform：rotate（2deg）; / * Opera * / 
 -moz-transform：rotate（2deg）; / * Firefox * / 
} 
  

有任何方法可以解决这个问题。通过强制Chrome使用AA？

示例如下：

解决方案

稍后，一个漂亮的技巧，以摆脱这些锯齿边缘CSS变化在Chrome是添加CSS属性 -webkit-backface-visibility 与值 hidden 。在我自己的测试中，这已经完全平滑了他们。希望有帮助。

  -webkit-backface-visibility：hidden; 
  

I've been using CSS3 transform to rotate images and textboxes with borders in my website.

The problem is that the border look jagged in Chrome, like a (low-resolution) game without Anti-Aliasing. In IE, Opera and FF it looks much better because AA is used (which is still clearly visible but not that bad). I can't test Safari because I don't own a Mac.

The rotated photo and text itself look fine, it is only the border that looks jagged.

The CSS I use is this:

.rotate2deg {
    transform: rotate(2deg);
    -ms-transform: rotate(2deg); /* IE 9 */
    -webkit-transform: rotate(2deg); /* Safari and Chrome */
    -o-transform: rotate(2deg); /* Opera */
    -moz-transform: rotate(2deg); /* Firefox */
}

Is there any way I can fix this, e.g. by forcing Chrome to use AA?

Example below:

解决方案

In case anyone's searching for this later on, a nice trick to get rid of those jagged edges on CSS transformations in Chrome is to add the CSS property -webkit-backface-visibility with a value of hidden. In my own tests, this has completely smoothed them out. Hope that helps.

-webkit-backface-visibility: hidden;

这篇关于css transform，chr​​ome中的锯齿边的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！