Text appears unsettled during transforms

[ygoe]

In Firefox, the text changes its appearance during the moving transform. At first it's normal, but when the target position has been reached, the text looks thin and has colour fringes. After a short moment, it reverts to a good rendering automatically. This is disturbing and looks strange. It does not happen in Chrome, other browsers untested. Windows 7. Also visible on your website, but not a strong as on mine.

Could I disable this transform by another CSS class or something? I don't think it is actually necessary, given that it doesn't work well.

[ygoe]

Workaround: Disable the text shadow on the tooltip text. Here's my code snippet for a custom class:

.hint--noshadow:after
{
    text-shadow: none;
}

[chinchang]

Hmm, interesting. I haven't noticed this but I suppose this have to do with how browsers perform transitions on transform property. GPU is used in the transition which actually converts the whole element into bitmap while transiting.