css - chrome 中的轻微锯齿状边缘(CSS 变换)

Question

实际上，我在 Chrome(v54/Windows 10)和其他我可以测试的现代导航器(Edge、Firefox...IE)上的transform:rotate 有一些问题。我的 div 的边缘有点参差不齐，它不像 Chrome 2012 版本中那样可怕，但它仍然不完美。

我尝试了几个技巧作为

backface-visibility: hidden;
transform: translate3d( 0, 0, 0);
-webkit-transform-style: preserve-3d;

但似乎没有一个能完全奏效。结果比最初的更平滑，但仍不完全令人满意。

这是我的 jsfiddle 的链接:https://jsfiddle.net/2szkvj70/1/

和截图:

我是不是有点太急了，或者是否有可能获得完美的无锯齿结果？ :)

提前致谢!

Answer 1

您可以通过稍微调整您的 CSS 来解决此问题:

outline: 1px solid transparent;

代替:

轮廓:1px透明；

https://jsfiddle.net/2szkvj70/2/ - 这提供了一个比较。