Bug 60047 - Toggling overflow with :hover results in inadequate repaint
Summary: Toggling overflow with :hover results in inadequate repaint
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 525.x (Safari 3.2)
Hardware: All All
: P2 Normal
Assignee: Nobody
URL: http://www.chaos.org.uk/~jf/Chrome-re...
: 62641 (view as bug list)
Depends on:
Reported: 2011-05-03 11:37 PDT by J Fairbairn
Modified: 2013-09-12 12:31 PDT (History)
6 users (show)

See Also:

Self-contained test-case (1.18 KB, application/xhtml+xml)
2011-05-04 00:08 PDT, J Fairbairn
no flags Details
simplified test-case (602 bytes, text/html)
2012-06-15 00:50 PDT, Michal Čaplygin
no flags Details
simplified test-cases' screenshot (7.47 KB, image/png)
2012-06-15 00:55 PDT, Michal Čaplygin
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description J Fairbairn 2011-05-03 11:37:19 PDT
See URL and its linked stylesheet for example.

Hovering over the 42 causes the "detail" division to be displayed, but moving the cursor away causes only 42 to be repainted, leaving the rest of the division visible.

Bug is only triggered if overflow on the containing block (class "cell" in the example) is switched from hidden to visible on :hover.

The effect is present in at least google-chrome 11.0.696.57 beta (Linux SL6 gtk2-2.18.9-4), 11.0.696.48 beta (Linux Fedora 14 gtk2-22.0-1), and Safari 5.0.5 (6533.21.1) on Mac OS 10.6.7
Comment 1 Simon Fraser (smfr) 2011-05-03 18:06:02 PDT
Please attach a self-contained test case to this bug. Thanks.
Comment 2 J Fairbairn 2011-05-04 00:08:32 PDT
Created attachment 92198 [details]
Self-contained test-case
Comment 3 Alexey Proskuryakov 2011-06-14 15:43:58 PDT
*** Bug 62641 has been marked as a duplicate of this bug. ***
Comment 4 Michal Čaplygin 2012-06-15 00:50:53 PDT
Created attachment 147765 [details]
simplified test-case

Attaching simplified test-case (spotted this bug myself and made this test before finding this report).

Swapping overflow of container AND swapping display of child node which is absolutely positioned apparently does this.
Comment 5 Michal Čaplygin 2012-06-15 00:55:26 PDT
Created attachment 147766 [details]
simplified test-cases' screenshot

Screenshot of above test-case. Same appearance in Safari 5.1.5 @ W7 64; Chromium 21 @ Ubuntu, Google Chrome 19 ...
Comment 6 Peter Johnson 2013-09-09 06:59:24 PDT
This is still an issue for me in Chrome Version 29.0.1547.65 in Sept' 2013.

As reported in this stack issue, a workaround is to add -webkit-transform: scale3d(1,1,1); to force webkit to use the 3d rendering engine.