Bug 50800

Summary: Font flicker issues on hover transition.
Product: WebKit Reporter: Pete Milkman <pmilkman>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED CONFIGURATION CHANGED    
Severity: Normal CC: bfulgham, jonlee, mitz, mmaxfield, otherleek, simon.fraser
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: Mac (Intel)   
OS: OS X 10.6   
URL: http://www.petemilkman.com/css3-2d-pg.php
See Also: https://bugs.webkit.org/show_bug.cgi?id=23364
Attachments:
Description Flags
Here's another case of this phenomenon. none

Pete Milkman
Reported 2010-12-09 20:56:59 PST
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.
Attachments
Here's another case of this phenomenon. (26 bytes, text/plain)
2011-08-02 13:18 PDT, Joshua Merrill 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Pete Milkman
Comment 1 2010-12-09 21:02:41 PST
This also occurs in Safari 5.
mitz
Comment 2 2010-12-10 00:05:55 PST
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.
Simon Fraser (smfr)
Comment 3 2010-12-10 08:34:24 PST
Related to bug 23364.
Pete Milkman
Comment 4 2011-02-25 19:37:59 PST
23364 has been closed, but this is stil happening in the latest nightly.
Joshua Merrill
Comment 5 2011-08-02 13:18:44 PDT
Created attachment 102691 [details] Here's another case of this phenomenon.
Klim Lee
Comment 6 2015-06-21 22:41:10 PDT
It’s 2015, and the issue is still there.
Myles C. Maxfield
Comment 7 2015-07-09 20:41:39 PDT
Seems likely this is due to compositing layers.
Myles C. Maxfield
Comment 8 2015-07-09 20:42:08 PDT
Ah, I didn't read what Mitz said. Yep.
Brent Fulgham
Comment 9 2022-07-12 14:02:48 PDT
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.
Note You need to log in before you can comment on or make changes to this bug.