Firefox text after CSS rotation

enter image description here

therefore, I read a lot about the current state of rotating text and could not fully achieve real anti-aliasing in all browsers. It looks like the first drawer in fig. In chrome, but the second one is a jaggedy box in firefox. I tried the most popular fixes, including -webkit-backface-visibility: hidden; -webkit-font-smoothing: smoothed; and maybe one more I can’t remember.

However, this does not ask the same question, but a new one that I have not found anywhere. These two screenshots of the same box are taken from Firefox. The jaggedy box at the bottom is what looks normal, however, when I link rotation attributes to another (completely different) element on the page using the css editing console, it makes the field perfect / smooth ...

, , , . div, , css div ( css ), , ... . WTF?!!?!? css , CSS ?

EDIT: PIC enter image description here

+4
2

- , "" .

:

CSS "" :

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

:

GPU 3d- . , .

:

: -, , ; -, , .

dev.opera.com , transform3d CSS3 will-change.

+8

, , . , , - .

:

: : opengl/webgl . translate3d (0px, 0px, 1px) , ""?

. , - !

0

Source: https://habr.com/ru/post/1526444/


All Articles