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;

代替：

outline: 1px transparent;

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