Bug 15015 – Most of www.aol.com redraws unnecessarily when headline/photo section changes

• Status: RESOLVED
• Resolution: FIXED
• Component: Layout and Rendering

[David Kilzer (:ddkilzer)]

* SUMMARY
Most of the <http://www.aol.com/> web page redraws when the headline/photo section in the top center of the page updates.

* STEPS TO REPRODUCE
1. Launch Safari/WebKit.
2. Go to URL:  http://www.aol.com/
3. Launch Quartz Debug.
4. Check the "" checkbox.
5. Watch the AOL screen when the story changes.

* EXPECTED RESULTS
Only the headline/photo section should update.

* ACTUAL RESULTS
Most of the screen updates.

* REGRESSION
Unknown.  Tested with a local debug build of WebKit r25150 with Safari 3 Public Beta v. 3.0.3 (522.12.1) on Mac OS X 10.4.10 (8R218).

* NOTES
<rdar://problem/5420308>

[David Kilzer (:ddkilzer)]

(In reply to comment #0)
> 4. Check the "" checkbox.

Oops!  That would be the "Flash identical updates" checkbox.  :)

The excessive repainting is a result of layoutInlineChildren doing a full relayout in the presence of floats:

        if (hasFloat)
            fullLayout = true; // FIXME: Will need to find a way to optimize floats some day.

In the case of the AOL page, it might be possible to mitigate the problem by using subtree relayout for overflow:hidden blocks, since the updates seem to be confined to such a block. 

[David Kilzer (:ddkilzer)]

Created attachment 16046 [details]
Reduction v1

Here is a self-contained reduction of the issue.  Note that I "inlined" the stylesheet (http://www.aolcdn.com/_media/aolp_v23b/main.css) so that no external resources would be referenced, which is why it's over 80 Kb.  Also note that I replaced the AOL JavaScript machinery with an update() script of my own that basically does the same thing, except with a 1000 ms timeout instead of 7000 ms.

The crux of this reduction is:

<br class="cl_l">

Removing this entirely causes the redraw to occur where expected.  Removing just the class (which maps to "clear: left;"), causes the full width of the page to be redrawn, but the height shrinks to the height of the content being changed.

This is NOT the only issue, however.  Removing to similar <br> tags in the original www.aol.com source does not fix the redraw issues.  (It DOES reduce the redraw footprint, though, only requiring two-thirds of the width of the page to be redrawn.)

Created attachment 16977 [details]
Use subtree layout for some overflow areas

The part that needs careful review is the added condition in objectIsRelayoutBoundary().

[Dave Hyatt]

Comment on attachment 16977 [details]
Use subtree layout for some overflow areas

This *seems* ok.  I would replace:

obj->style()->width().isAuto()

with isIntrinsicOrAuto.

r=me

Fixed in <http://trac.webkit.org/projects/webkit/changeset/27351>.

[David Kilzer (:ddkilzer)]

(In reply to comment #6)
> Fixed in <http://trac.webkit.org/projects/webkit/changeset/27351>.

Either the reduction was bogus, or AOL changed their site again.  Filed Bug 15890 as a follow-up.