If you hover over one of the squares in the grid, you'll notice the text in the grid squares after it in the grid get lighter during the transition, and then return to normal when the transition is complete. - It only happens to the squares after the one you hover over. - Happens during the transition but not before or after. - Doesn't happen in Chrome, FF4 or Opera. - The 'lightening' of the text happens immediately and reverts immediately (not a smooth transition). - The 'lightening' problem was not intended in the code at all.
This also occurs in Safari 5.
The squares go in and out of compositing mode, and when subpixel antialiasing is on (which is the default on Mac OS X), text rendering in composited layers is different. A workaround would be to permanently disable subpixel antialiasing on the page, using "-webkit-font-smoothing: antialiased;". There may already be bugs in the database covering the issues seen in this case.
Related to bug 23364.
23364 has been closed, but this is stil happening in the latest nightly.
Created attachment 102691 [details] Here's another case of this phenomenon.
It’s 2015, and the issue is still there.
Seems likely this is due to compositing layers.
Ah, I didn't read what Mitz said. Yep.
I can't see any difference between Safari, Chrome, or Firefox in handling of the test case (the link is unavailable, but the http://css3exp.com/button/# test case is still active.