css 变换，chrome 中的锯齿状边缘
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6492027/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css transform, jagged edges in chrome
提问by dtech
I've been using CSS3 transform to rotate images and textboxes with borders in my website.
我一直在使用 CSS3 转换来旋转我网站中带有边框的图像和文本框。
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.
问题是 Chrome 中的边框看起来是锯齿状的，就像没有抗锯齿的（低分辨率）游戏一样。在 IE、Opera 和 FF 中，它看起来好多了，因为使用了 AA（仍然清晰可见，但还不错）。我无法测试 Safari，因为我没有 Mac。
The rotated photo and text itself look fine, it is only the border that looks jagged.
旋转后的照片和文字本身看起来不错，只是边框看起来有锯齿。
The CSS I use is this:
我使用的 CSS 是这样的：
.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?
有什么办法可以解决这个问题，例如强制 Chrome 使用 AA？
Example below:
下面的例子：
回答by Neven
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-visibilitywith a value of hidden. In my own tests, this has completely smoothed them out. Hope that helps.
如果稍后有人搜索此内容，在 Chrome 中摆脱 CSS 转换上那些锯齿状边缘的一个很好的技巧是添加-webkit-backface-visibility值为.css 的 CSS 属性hidden。在我自己的测试中，这已经完全消除了它们。希望有帮助。
-webkit-backface-visibility: hidden;
回答by mhhorizon
If you are using transitioninstead of transform, -webkit-backface-visibility: hidden;does not work. A jagged edge appears during animation for a transparent png file.
如果您使用的是transition代替transform，-webkit-backface-visibility: hidden;则不起作用。在透明 png 文件的动画过程中会出现锯齿状边缘。
To solve it I used: outline: 1px solid transparent;
为了解决它，我使用了： outline: 1px solid transparent;
回答by Callam
Adding a 1px transparent border will trigger anti-aliasing
添加 1px 透明边框会触发抗锯齿
outline: 1px solid transparent;
Alternatively, add a 1px transparent box-shadow.
或者，添加一个 1px 的透明框阴影。
box-shadow: 0 0 1px rgba(255,255,255,0);
回答by Zypherone
Try 3d transform. This works like a charm!
尝试 3d 变换。这就像一个魅力！
/* Due to a bug in the anti-liasing*/
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateZ(2deg);
回答by chris
Chosen answer (nor any of the other answers) didn't work for me, but this did:img {outline:1px solid transparent;}
选择的答案（或任何其他答案）对我不起作用，但这样做了：img {outline:1px solid transparent;}
回答by Pegues
I've been having an issue with a CSS3 gradient with -45deg. The backgroundslanted, was badly jagged similar to but worse than the original post. So I started playing with both the background-size. This would stretch out the jaggedness, but it was still there. Then in addition I read that other people are having issues too at 45deg increments so I adjusted from -45degto -45.0001degand my problem was solved.
我一直在使用 -45deg 的 CSS3 渐变问题。的background倾斜，是严重锯齿状相似，但比原来的职位更糟。所以我开始玩background-size。这会拉长锯齿状，但它仍然存在。然后另外我读到其他人在 45 度增量时也有问题，所以我从 调整-45deg到-45.0001deg并且我的问题得到了解决。
In my CSS below, background-sizewas initially 30pxand the degfor the background gradient was exactly -45deg, and all keyframes were 30px 0.
在我下面的 CSS 中，background-size最初30px是deg，背景渐变的 完全是-45deg，所有关键帧都是30px 0。
@-webkit-keyframes progressStripeLTR {
to {
background-position: 60px 0;
};
}
@-moz-keyframes progressStripeLTR {
to {
background-position: 60px 0;
};
}
@-ms-keyframes progressStripeLTR {
to {
background-position: 60px 0;
};
}
@-o-keyframes progressStripeLTR {
to {
background-position: 60px 0;
};
}
@keyframes progressStripeLTR {
to {
background-position: 60px 0;
};
}
@-webkit-keyframes progressStripeRTL {
to {
background-position: -60px 0;
};
}
@-moz-keyframes progressStripeRTL {
to {
background-position: -60px 0;
};
}
@-ms-keyframes progressStripeRTL {
to {
background-position: -60px 0;
};
}
@-o-keyframes progressStripeRTL {
to {
background-position: -60px 0;
};
}
@keyframes progressStripeRTL {
to {
background-position: -60px 0;
};
}
.pro-bar-candy {
width: 100%;
height: 15px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: rgb(187, 187, 187);
background: -moz-linear-gradient(
-45.0001deg,
rgba(187, 187, 187, 1.00) 25%,
transparent 25%,
transparent 50%,
rgba(187, 187, 187, 1.00) 50%,
rgba(187, 187, 187, 1.00) 75%,
transparent 75%,
transparent
);
background: -webkit-linear-gradient(
-45.0001deg,
rgba(187, 187, 187, 1.00) 25%,
transparent 25%,
transparent 50%,
rgba(187, 187, 187, 1.00) 50%,
rgba(187, 187, 187, 1.00) 75%,
transparent 75%,
transparent
);
background: -o-linear-gradient(
-45.0001deg,
rgba(187, 187, 187, 1.00) 25%,
transparent 25%,
transparent 50%,
rgba(187, 187, 187, 1.00) 50%,
rgba(187, 187, 187, 1.00) 75%,
transparent 75%,
transparent
);
background: -ms-linear-gradient(
-45.0001deg,
rgba(187, 187, 187, 1.00) 25%,
transparent 25%,
transparent 50%,
rgba(187, 187, 187, 1.00) 50%,
rgba(187, 187, 187, 1.00) 75%,
transparent 75%,
transparent
);
background: linear-gradient(
-45.0001deg,
rgba(187, 187, 187, 1.00) 25%,
transparent 25%,
transparent 50%,
rgba(187, 187, 187, 1.00) 50%,
rgba(187, 187, 187, 1.00) 75%,
transparent 75%,
transparent
);
background: -webkit-gradient(
linear,
right bottom,
right top,
color-stop(
25%,
rgba(187, 187, 187, 1.00)
),
color-stop(
25%,
rgba(0, 0, 0, 0.00)
),
color-stop(
50%,
rgba(0, 0, 0, 0.00)
),
color-stop(
50%,
rgba(187, 187, 187, 1.00)
),
color-stop(
75%,
rgba(187, 187, 187, 1.00)
),
color-stop(
75%,
rgba(0, 0, 0, 0.00)
),
color-stop(
rgba(0, 0, 0, 0.00)
)
);
background-repeat: repeat-x;
-webkit-background-size: 60px 60px;
-moz-background-size: 60px 60px;
-o-background-size: 60px 60px;
background-size: 60px 60px;
}
.pro-bar-candy.candy-ltr {
-webkit-animation: progressStripeLTR .6s linear infinite;
-moz-animation: progressStripeLTR .6s linear infinite;
-ms-animation: progressStripeLTR .6s linear infinite;
-o-animation: progressStripeLTR .6s linear infinite;
animation: progressStripeLTR .6s linear infinite;
}
.pro-bar-candy.candy-rtl {
-webkit-animation: progressStripeRTL .6s linear infinite;
-moz-animation: progressStripeRTL .6s linear infinite;
-ms-animation: progressStripeRTL .6s linear infinite;
-o-animation: progressStripeRTL .6s linear infinite;
animation: progressStripeRTL .6s linear infinite;
}
回答by dtech
You might be able to mask the jagging using blurred box-shadows. Using -webkit-box-shadow instead of box-shadow will make sure it doesn't affect non-webkit browsers. You might want to check Safari and the mobile webkit browsers though.
您可以使用模糊的box-shadows来掩盖锯齿。使用 -webkit-box-shadow 而不是 box-shadow 将确保它不会影响非 webkit 浏览器。不过，您可能需要检查 Safari 和移动 webkit 浏览器。
The result is somewhat better, but still a lot less good then with the other browsers:
结果稍微好一些，但仍然不如其他浏览器好：
回答by Nicholas McCreath
Just thought that we'd throw in our solution too as we had the exact same problem on Chrome/Windows.
只是认为我们也会提出我们的解决方案，因为我们在 Chrome/Windows 上遇到了完全相同的问题。
We tried the solution by @stevenWatkins above, but still had the "stepping".
我们尝试了上面@stevenWatkins 的解决方案，但仍然有“踩踏”。
Instead of
代替
-webkit-backface-visibility: hidden;
We used:
我们用了：
-webkit-backface-visibility: initial;
For us this did the trick
对我们来说，这成功了
回答by chaser7016
Adding the following on the div surrounding the element in question fixed this for me.
在有问题的元素周围的 div 上添加以下内容为我解决了这个问题。
-webkit-transform-style: preserve-3d;
The jagged edges were appearing around the video window in my case.
在我的情况下，视频窗口周围出现锯齿状边缘。
回答by Aron
For me it was the perspective CSS property that did the trick:
对我来说，透视 CSS 属性起到了作用：
-webkit-perspective: 1000;
Completely illogical in my case as I use no 3d transitions, but works nonetheless.
在我的情况下完全不合逻辑，因为我没有使用 3d 过渡，但仍然有效。
