Bug 15015 - Most of www.aol.com redraws unnecessarily when headline/photo section changes
Summary: Most of www.aol.com redraws unnecessarily when headline/photo section changes
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 523.x (Safari 3)
Hardware: Macintosh OS X 10.4
: P2 Normal
Assignee: Nobody
URL: http://www.aol.com/
Keywords: InRadar
Depends on:
Reported: 2007-08-19 15:48 PDT by David Kilzer (:ddkilzer)
Modified: 2007-11-07 18:24 PST (History)
3 users (show)

See Also:

Reduction v1 (81.75 KB, text/html)
2007-08-20 19:54 PDT, David Kilzer (:ddkilzer)
no flags Details
Use subtree layout for some overflow areas (11.13 KB, patch)
2007-10-31 21:52 PDT, mitz
hyatt: review+
Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description David Kilzer (:ddkilzer) 2007-08-19 15:48:05 PDT
Most of the <http://www.aol.com/> web page redraws when the headline/photo section in the top center of the page updates.

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.

Only the headline/photo section should update.

Most of the screen updates.

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).

Comment 1 David Kilzer (:ddkilzer) 2007-08-19 15:49:32 PDT
(In reply to comment #0)
> 4. Check the "" checkbox.

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

Comment 2 mitz 2007-08-20 01:52:29 PDT
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. 
Comment 3 David Kilzer (:ddkilzer) 2007-08-20 19:54:44 PDT
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.)
Comment 4 mitz 2007-10-31 21:52:35 PDT
Created attachment 16977 [details]
Use subtree layout for some overflow areas

The part that needs careful review is the added condition in objectIsRelayoutBoundary().
Comment 5 Dave Hyatt 2007-10-31 22:43:12 PDT
Comment on attachment 16977 [details]
Use subtree layout for some overflow areas

This *seems* ok.  I would replace:


with isIntrinsicOrAuto.

Comment 6 mitz 2007-11-01 08:43:25 PDT
Fixed in <http://trac.webkit.org/projects/webkit/changeset/27351>.
Comment 7 David Kilzer (:ddkilzer) 2007-11-07 18:24:56 PST
(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.