CSS旋转后在Firefox中的反锯齿文本 [英] Antialiased text in Firefox after CSS rotation

问题描述

>

我们读了很多关于旋转文本的当前状态，并不能完美地得到真正的抗锯齿发生在所有浏览器。它看起来像在chrome中的第一个盒子，但第二个，jaggedy盒子在firefox。我试过最流行的修补程序，包括-webkit-backface-visibility：hidden; -webkit-font-smoothing：antialiased;也许还有一个我不记得。

然而，这不是问同一个问题，而是一个我在任何地方都找不到的新问题。这两个截图的同一个框都是从Firefox。底部的锯齿状框是正常的，但是，当我使用css编辑控制台的页面上的另一个（完全不同）元素的旋转属性，它渲染框完美/平滑...

然而，我必须继续向上或向下按钮，以改变整个框的另一个元素的旋转值，以完美地呈现抗锯齿，然后返回其锯齿状的正常自。我旋转了内容所在的div，并将css修复放在同一个div上（虽然我尝试将css修复放在每个元素上），我似乎没有得到任何平滑或反锯齿，就像你在框中看到的上面...只有当我在浏览器中的页面上旋转另一个元素。 WTF？!!？！？有没有办法在css中这样做或者它只是浏览器正在做的实时的，并不能重现CSS的平滑度？

编辑：PIC的评论部分

解决方案<

修正：

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

  transform：rotate（...）translate3d（0px，0px，1px）; 
  

解释：

实现为3d转换的元素创建一个GPU层，并在绘制时将其复合到页面的其余部分。此替代显示路径可以强制使用不同的文字呈现策略，从而导致更好的抗锯齿。

注意：

但是，这有点黑客：首先，我们要求一个三维变换，我们不想真正想要的;第二，强制许多不必要的GPU层可能会降低性能，特别是在RAM有限的移动平台上。

dev.opera.com对合成进行了很好的讨论，使用 transform3d CSS3 将更改属性。

so I've read a lot about the current state of rotating text and not being able to perfectly get real antialiasing to happen in all browsers. It looks like the first box in the pic in chrome, but the second, jaggedy box in firefox. I've tried the most popular fixes including -webkit-backface-visibility:hidden; -webkit-font-smoothing:antialiased; and maybe one other I can't remember.

However this is not asking the same question, but a new one I havent found anywhere. These two screenshots of the same box are both taken from Firefox. The jaggedy box on the bottom is what it looks like normally, however, when I mess with the rotation attributes with another(completely different) element on the page with the css edit console, it renders the box perfect / smoothly...

I do, however, have to continue to press up or down to change the rotation value on another element for the entire box to render antialiased perfectly, then it returns to its jaggedy normal self. I rotated the div that the content is in and put the css fixes on the same div(although I did try putting the css fixes on every element) and I didn't ever seem to get any smoothness or antialising like you see in the box above...only when I rotate another element on the page in the browser. WTF?!!?!? is there a way to do this in css or is it only something the browser is doing in realtime and cannot reproduce that smoothness in CSS yet?

EDIT: PIC for comments section

解决方案

For whatever reason, it seems under some circumstances browsers "forget" to antialias text while doing complex transforms.

The fix:

Using CSS to force the browser to render the transformed element in a separately-composited "layer" is one solution:

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

The explanation:

Many rendering engine implementations create a GPU layer for the 3d-transformed element, and composite it onto the rest of the page when painting. This alternate rendering path can force a different text-rendering strategy, resulting in better antialiasing.

The caveat:

However, this is a bit of a hack: first, we're asking for a 3-dimensional transform we don't really want; second, forcing many unnecessary GPU layers can degrade performance, especially on mobile platforms with limited RAM.

dev.opera.com hosts a good discussion of compositing, hacks using transform3d, and the CSS3 will-change property.

这篇关于CSS旋转后在Firefox中的反锯齿文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！