chrome中的锯齿状边缘（CSS变换）

Question

我在Chrome（v54 / Windows 10）上的转换：旋转和其他我可以测试的现代导航器（Edge，Firefox ... IE）实际上存在一些问题。我的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/ - 这提供了一个比较。