

Accidental layer creation - jaffathecake
http://jsbin.com/efirip/5/quiet

======
hcarvalhoalves
Instead of z-index hacks, you can solve for Webkit (the only browser where
this quirk happens so far) with:

    
    
        -webkit-font-smoothing: subpixel-antialiased !important;

~~~
bicknergseng
This is what I do... it should be noted though that some devs may not want
that style rendering by default.

------
gwwar
This is a bug in chrome:
<https://code.google.com/p/chromium/issues/detail?id=100666>

~~~
gwwar
<https://code.google.com/p/chromium/issues/detail?id=122083>

You will also see other artifacts when placing text with css transforms over
any other compositing layer (canvas, elements with css transform/animation
etc).

------
kevingadd
It's unfortunate to see claims being made about best practices for performance
and behavior entirely based on what Chrome Canary does (on one platform, no
less). If you're going to tell people to cover their pages in z-index, you
should at least test it in other browsers to see if there's a performance
penalty (or improvement) there...

~~~
M4v3R
This works the same way in Safari 6 on OS X Mountain Lion. z-index: 1 does the
trick. And this is a wonderful advice - losing of subpixel antialiasing on the
text while something is animating on the screen was always killing me. And now
I know exactly why it happens and how to fix it.

------
Qantourisc
Bug closed: Won't fix Please contact your browser vendor.

------
aoetr
The text in Firefox doesn't lose subpixel antialiasing, at least in my
browser.

Also, it's perfectly possible to use GPU compositing with subpixel antialiased
texture, you just need a separate texture to store the (Ra, Ga, Ba) pre-
component "alpha" vales and either dual source blending, two rendering passes
(first to apply alpha to destination, second to add color), three rendering
passes (one per color), or a pixel shader that takes the pre-blend target
surface as an input.

If your browser doesn't do that, file a bug.

~~~
capisce
Sure, but once the text is cached in a layer that layer might be rotated or
scaled or similar, in which case subpixel antialiased text would cause ugly
artifacts. Keeping subpixel antialiased text in the layer and re-rendering the
layer without subpixel antialiasing when a rotating or scaling animation
starts would lead to stutters in the animation.

Looking forward to high DPI displays obsoleting subpixel antialiasing as it
leads to a bunch of problems when wanting to create fluidly animating UIs.

~~~
ferongr
I don't know what Firefox does on GNU/Linux or OSX but on Windows 7 with
DirectWrite, applying transformations to subpixel-AA'ed text is very fast and
has excellent fidelity.

