Bug 74451 - Part of page incorrectly aligned when inserting an empty beforeLoad listener
Summary: Part of page incorrectly aligned when inserting an empty beforeLoad listener
Alias: None
Product: WebKit
Classification: Unclassified
Component: UI Events (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Windows 7
: P2 Normal
Assignee: Nobody
URL: http://highslide.com/examples/gallery...
Depends on:
Reported: 2011-12-13 15:02 PST by famlam
Modified: 2014-12-02 09:31 PST (History)
5 users (show)

See Also:

Chrome test extension (935 bytes, application/x-chrome-extension)
2011-12-13 15:02 PST, famlam
no flags Details
Minimized test case (3.96 KB, text/html)
2011-12-14 00:01 PST, Wladimir Palant
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description famlam 2011-12-13 15:02:07 PST
Created attachment 119090 [details]
Chrome test extension

When an empty beforeLoad handler is inserted into a page (for example by an extension), a part of the page can be incorrectly aligned.
Verified to be broken in WebKit r102684 on Windows 7

Reproduction steps:
1. Install attached extension (if you use Chrome). Otherwise, create an extension that uses this code in it's content script:
document.addEventListener("beforeload", function(event) {}, true);
Alternatively, you could use  the AdBlock extension (http://safariadblock.com/) instead, although it's beforeload handler is not empty.
2. navigate to http://highslide.com/examples/gallery-horizontal-strip.html
3. click the first image
4. notice the bottom (navigation) bar is shifted to the right.

5. remove the extension and repeat steps 2, 3 and 4 and notice the issue has gone away.

Expected: the bottom navigation bar should be centered
Instead: the bottom bar is shifted to the right as if it was centered before it had it's size being applied (in that case it's a possible side effect of fixed bug 45586)
Comment 1 Wladimir Palant 2011-12-14 00:01:51 PST
Created attachment 119168 [details]
Minimized test case

I can confirm the bug, minimized test case (no longer requiring an extension) is attached. Took me a while to figure this out but what this site does apparently:

* It preloads thumbnail images.
* When the user clicks an image it fills the thumbnail row with new images using the same src as for preloaded images.
* It expects the offsetWidth for the thumbnail row to be correct immediately after inserting the images.

It's that last step that fails - if a beforeload event handler is present the width is reported as if the width of all images were zero. That's what the testcase demonstrate: if you create a copy of a preloaded image and insert it into a table then the reported offsetWidth of the image container is usually immediately correct, not if you have a beforeload event listener however.

The strange thing is: if you test img2.width you will get the correct value before offsetWidth of the container is accessed and zero afterwards. I guess that accessing offsetWidth triggers a reflow and something goes wrong there.
Comment 2 Eason Goodale 2013-10-24 17:22:47 PDT
Sorry to bring this up from the dead, but is there a fix planned?