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主持关于合成,黑客使用transform3d和CSS3 will-change属性的讨论.