css变换,铬的锯齿状边缘
dte*_*ech 187 css google-chrome transform antialiasing css3
我一直在使用CSS3转换在我的网站中旋转带边框的图像和文本框.
问题是Chrome中的边框看起来很混乱,就像没有抗锯齿的(低分辨率)游戏一样.在IE,Opera和FF中它看起来好多了,因为使用了AA(它仍然清晰可见,但并不坏).我无法测试Safari,因为我没有Mac.
旋转的照片和文字本身看起来很好,只是看起来像锯齿状的边框.
我使用的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 */
}
有什么方法可以解决这个问题,例如强迫Chrome使用AA吗？
示例如下:
小智 383
如果有人在以后搜索这个,那么摆脱Chrome中CSS转换的锯齿边缘的一个好方法是添加-webkit-backface-visibility值为的CSS属性hidden.在我自己的测试中,这已经完全平滑了它们.希望有所帮助.
-webkit-backface-visibility: hidden;
- @lazd修复它在iOS中添加`padding:1px; -webkit-background-clip:content-box;` (11认同)
- Lifesaver - 这个技巧让我们可以在许多网站上重新启用-webkit-transform,这些网站以前因为抗锯齿问题而被迫关闭转换.谢谢! (7认同)
- 这适用于Chrome,但它会让它们在iOS 6中再次出现问题! (5认同)
- @RobFletcher 添加了填充和背景剪辑，根据此线程，这对于跨浏览器和跨操作系统解决方案至关重要。这也修复了我的 OSX/Chrome 问题......我认为一个完整的解决方案是这样的：`padding: 1px;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-background-clip:content -框；背景剪辑：内容框；` (2认同)
小智 114
如果您使用transition而不是transform,-webkit-backface-visibility: hidden;则不起作用.在动画期间,透明png文件会出现锯齿状边缘.
要解决它我使用: outline: 1px solid transparent;
- 这似乎有助于在web-kit-backface-visibility属性错过的情况下. (4认同)
- 当其他人都没有时,对我有用.在添加此属性之前,Chrome Android存在问题.现在所有浏览器似乎都能正常工作. (2认同)
- 非常适合我的需求。我确实在使用过渡，而其他答案导致我的 PNG 在其默认状态下变得像素化。您的回答有助于消除任何像素化 - 在默认状态和过渡期间。完美的！ (2认同)
- 这对我来说最新的镀铬57 (2认同)
Cal*_*lam 21
添加1px透明边框将触发抗锯齿
outline: 1px solid transparent;
或者,添加1px透明框阴影.
box-shadow: 0 0 1px rgba(255,255,255,0);
- 在你的答案中添加CSS的顶部和`outline:1px solid transparent;`对我来说效果很好.上面的其他解决方案效果不佳. (4认同)
小智 17
尝试3d变换.这就像一个魅力!
/* Due to a bug in the anti-liasing*/
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateZ(2deg);
dgk*_*nca 15
我已经尝试了这里的所有解决方案，但对我的情况不起作用。但使用
will-change: transform;
修复了锯齿状问题。
- 这是 chrome 97 上唯一有效的解决方案（不确定何时启动） (2认同)
| 归档时间： |
|
| 查看次数： |
112285 次 |
| 最近记录： |