150271 – Floating box is misplaced after content change.

RESOLVED FIXED 150271

Floating box is misplaced after content change.

https://bugs.webkit.org/show_bug.cgi?id=150271

Summary Floating box is misplaced after content change.

Chris Rebert

Reported 2015-10-16 23:35:04 PDT

Created attachment 263362 [details] Screenshot of incorrect rendering Original downstream Bootstrap bug: https://github.com/twbs/bootstrap/issues/17913 Steps to reproduce the problem: 1. Download the ZIP for https://gist.github.com/cvrebert/14f296e3629e177da6c2 2. Unzip it. 3. Download http://code.jquery.com/jquery-1.11.3.min.js to the unzipped folder. 4. Open example.html in WebKit Nightly. 5. While looking at Button 2, refresh the page repeatedly. What is the expected behavior? Button 1 and Button 2 should be vertically aligned. What went wrong? Sometimes Button 2 renders completely below Button 1, vertically speaking. In the course of trying to further simplify the testcase, I seemed to observe the following: * The <div class="hidden"></div> is necessary to manifest the bug. * Changing it to <div style="display:none;"></div> avoids the bug * Moving the code for the .hidden class (`.hidden { display: none !important; }`) out of the external CSS file and into the <style> tag in the <head> avoids the bug. * The bug does not manifest if jQuery is removed, even though the webpage doesn't actually invoke jQuery anywhere. Based on these observations, I speculate that the bug might be some kind of race condition related to the loading of external assets. Analogous Chrome bug: https://code.google.com/p/chromium/issues/detail?id=544290 Firefox is NOT affected by this bug. I don't have a Windows box available to test MS Edge.

Attachments
Screenshot of incorrect rendering (15.13 KB, image/png) 2015-10-16 23:35 PDT, Chris Rebert	no flags	Details
Screenshot of correct rendering, taken on a different refresh of same page (14.98 KB, image/png) 2015-10-16 23:35 PDT, Chris Rebert	no flags	Details
Complete self-contained testcase (47.32 KB, application/zip) 2015-10-16 23:37 PDT, Chris Rebert	no flags	Details
Test reduction with no external dependency. (398 bytes, text/html) 2015-10-21 15:27 PDT, zalan	no flags	Details
Test reduction (298 bytes, text/html) 2015-10-22 10:04 PDT, zalan	no flags	Details
Patch (9.76 KB, patch) 2015-10-26 12:10 PDT, zalan	no flags	Details Formatted Diff Diff
Patch (14.12 KB, patch) 2015-10-26 16:16 PDT, zalan	no flags	Details Formatted Diff Diff
Show Obsolete (2) View All Add attachment proposed patch, testcase, etc.

Chris Rebert

Comment 1 2015-10-16 23:35:40 PDT

Created attachment 263363 [details] Screenshot of correct rendering, taken on a different refresh of same page

Chris Rebert

Comment 2 2015-10-16 23:37:32 PDT

Created attachment 263364 [details] Complete self-contained testcase

Chris Rebert

Comment 3 2015-10-16 23:43:19 PDT

Note that, other than .hidden, Bootstrap's CSS is only relevant insofar as the bug seems to require the loading of an arbitrary large external CSS file in order to get triggered.

Carl Traversy

Comment 4 2015-10-19 08:21:48 PDT

Declaring the css file before the javascript file does not trigger the bug. Bug not reproducible with: <head> <link href="bootstrapish.css" rel="stylesheet" type="text/css" /> <script src="jquery-1.11.3.min.js"></script> </head> Bug reproducible with: <head> <script src="jquery-1.11.3.min.js"></script> <link href="bootstrapish.css" rel="stylesheet" type="text/css" /> </head>

zalan

Comment 5 2015-10-21 15:19:34 PDT

It seems to me that we don't properly clean up the tree after display:none is applied on the <div> in the middle. (This is the output of a slightly modified test reduction with spans instead of buttons) <span>foo</span><div class="hidden"></div><div class="collapseMenu"><span>bar</span> Broken rendering --AG--- -- RenderBlock (0.00, 0.00) (1491.00, 20.00) renderer->(0x12135df18) ------- -- RootInlineBox (0.00, 2.00) (20.22, 16.00) (0x122fbac78) renderer->(0x12135df18) ------- -- InlineTextBox (0.00, 2.00) (20.22, 16.00) (0x122fb23c0) run(0, 3) "foo" ------- -- SPAN RenderInline renderer->(0x120b73f70) node->(0x120b5dc98) ------- -- #text RenderText renderer->(0x120b50960) node->(0x120b4f370) length->(3) "foo" ----F-- -- DIV RenderBlock (1470.52, 20.00) (20.48, 20.00) renderer->(0x12135d8a0) node->(0x120b5dd68) ------- -- RootInlineBox (0.00, 2.00) (20.48, 16.00) (0x122fbad20) renderer->(0x12135d8a0) ------- -- InlineTextBox (0.00, 2.00) (20.48, 16.00) (0x122fb2420) run(0, 3) "bar" ------- -- SPAN RenderInline renderer->(0x120b49000) node->(0x120b5ddd0) ------- -- #text RenderText renderer->(0x120b50cc0) node->(0x120b4f3c0) length->(3) "bar" Correct rendering: ------- -- RootInlineBox (0.00, 2.00) (20.22, 16.00) (0x11d7185e8) renderer->(0x12135df18) ------- -- InlineTextBox (0.00, 2.00) (20.22, 16.00) (0x117f1a900) run(0, 3) "foo" ------- -- SPAN RenderInline renderer->(0x11fbf5820) node->(0x11fbf5478) ------- -- #text RenderText renderer->(0x117f4b7e0) node->(0x122fd2910) length->(3) "foo" ----F-- -- DIV RenderBlock (1470.52, 0.00) (20.48, 20.00) renderer->(0x12135d398) node->(0x11fbf5548) ------- -- RootInlineBox (0.00, 2.00) (20.48, 16.00) (0x11d718540) renderer->(0x12135d398) ------- -- InlineTextBox (0.00, 2.00) (20.48, 16.00) (0x117f1a8a0) run(0, 3) "bar" ------- -- SPAN RenderInline renderer->(0x11fbf5888) node->(0x11fbf55b0) ------- -- #text RenderText renderer->(0x117f1a420) node->(0x122fd2960) length->(3) "bar"

zalan

Comment 6 2015-10-21 15:27:36 PDT

Created attachment 263749 [details] Test reduction with no external dependency.

zalan

Comment 7 2015-10-22 10:04:43 PDT

Created attachment 263832 [details] Test reduction

zalan

Comment 8 2015-10-26 12:10:18 PDT

Created attachment 264059 [details] Patch

Dave Hyatt

Comment 9 2015-10-26 13:45:36 PDT

Comment on attachment 264059 [details] Patch r=me