Bug 63740 – [Windows] Drawing Artifacts When Scrolling

• Component: WebKit Misc.
• Status: NEW

[Brent Fulgham]

The attached test case triggers what seems to be a drawing bug where the web page is scrolled.

The attached HTML/CSS/JavaScript files implement a system where a particular DOM node is displayed with a semi-opaque overlay rectangle showing the region selected.  The region can cover more area than a single row, as the contents are hierarchical, so selecting the containing element causes child elements to be highlighted as a group.

When you move off of a node, the region is un-highlighted, and the new region is displayed with highlighting activated.  If you mouse over a blank area of the page, all highlighting is turned off.

Under current Safari (and nightlies), if you scroll partially down the page, then move your mouse up and down over the page I observe the following:

1. Some 'highlighted' regions are not turned off when moving off of the node.
2. Partial bits of previously highlighted regions are retained (i.e., part of a border, or most of a highlighted block with some small areas redrawn with the background color.

This looks like it might be a repainting problem, where regions are not being properly identified as 'dirty' when moving the mouse around.

[Brent Fulgham]

Created attachment 99343 [details]
Example redraw problem

User is hovering over 'Mass Recovery (%)', but the old selection ('Rh Conformation Plot y-intercept') is mostly still visible, with only the region under the text above the cell being redrawn.

[Brent Fulgham]

The problem does not seem to happen (or is at least very hard to reproduce) when interacting with the region at the top of the page (i.e., without scrolling).

If you shrink the browser window, such that the bottom scrollbar is always active, the problem also seems to go away.  There might be some issue of scrollbar size not being properly accounted for in the display logic.

[Brent Fulgham]

Created attachment 99347 [details]
ZIP containing the HTML/CSS/JavaScript code to demonstrate the problem.

[Brent Fulgham]

Created attachment 99350 [details]
ZIP containing the HTML/CSS/JavaScript code to demonstrate the problem.

Updated ZIP without security settings.

[Brent Fulgham]

This example does not seem to trigger a problem under the current shipping version of Safari on Mac OS X (10.6.8)

[Brent Fulgham]

Part of the problem seems to be the modification of the rect size (see the JavaScript routine 'adjustSelector', where the right-hand boundary of the rect is increased by the size of a button image (not used in the example).

It seems that when this is performed on a heading (which span the full width of the page), it forces the element width to extend beyond the page boundaries set during the initial layout.

This causes the scrollbar to pop-in on the bottom of the page.  At that point, the layout logic seems to get confused and the repaint problems start happening.

A workaround for now is to not increase the right-hand size of the rect, which prevents the last-minute scroll bar addition.  When I make that change, I no longer get drawing artifacts.