CSS旋转后Firefox中的抗锯齿文本

Question

所以我已经阅读了很多关于旋转文本的当前状态，并且无法在所有浏览器中完美地获得真正的抗锯齿效果。它看起来像是Chrome中图片中的第一个框，但是firefox中的第二个框格。我尝试过最流行的修复程序，包括-webkit-backface-visibility：hidden; -webkit-字体平滑：抗锯齿;也许还有一个我不记得了。

然而，这不是问同样的问题，而是一个我在任何地方都找不到的新问题。这两个相同框的截图都取自Firefox。底部的锯齿状框架通常看起来像是这样，但是，当我使用css编辑控制台将页面上的另一个（完全不同的）元素与旋转属性混淆时，它会使框完美/平滑......

然而，我确实必须继续向上或向下按下以更改整个框的另一个元素的旋转值以完美地渲染抗锯齿，然后它返回到它的锯齿状正常自我。我旋转了内容所在的div并将css修复程序放在同一个div上（尽管我确实尝试将css修复程序放在每个元素上）并且我似乎没有像你在框中看到的那样得到任何平滑或反讽以上...仅当我在浏览器中旋转页面上的另一个元素时。 WTF？！？！？有没有办法在css中执行此操作，或者只是浏览器实时执行此操作并且无法在CSS中重现这种平滑性？

编辑：PIC评论部分

Answer 1

无论出于何种原因，在某些情况下，浏览器在进行复杂变换时会“忘记”抗锯齿文本。

修复：

使用CSS强制浏览器在单独合成的“图层”中渲染转换后的元素是一种解决方案：

transform: rotate(…) translate3d(0px,0px,1px);

解释：

许多渲染引擎实现为3d变换元素创建GPU层，并在绘制时将其合成到页面的其余部分。这种替代渲染路径可以强制使用不同的文本渲染策略，从而产生更好的抗锯齿效果。

警告：

然而，这有点像黑客：首先，我们要求的是一个我们并不想要的三维变换;第二，强制许多不必要的GPU层会降低性能，尤其是在RAM有限的移动平台上。

dev.opera.com hosts a good discussion合成，黑客使用transform3d和CSS3 will-change属性。

Answer 2

杰拉米，如果你回来回答我，我可以给你答案。刚刚意识到我没有得到答案所以我需要在这里放一些东西。

此解决方案与上述评论一样：

杰里米： 我有另一个想法：它可能与在幕后创建一个opengl / webgl层有关。如果你在旋转变换后添加translate3d（0px，0px，1px），那么它是＆＃34;模糊了＆＃34;多一点？

答案 - 是的，这可以完全消除所有浏览器中任何文本的别名！