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.
Created attachment 263363 [details] Screenshot of correct rendering, taken on a different refresh of same page
Created attachment 263364 [details] Complete self-contained testcase
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.
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>
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"
Created attachment 263749 [details] Test reduction with no external dependency.
Created attachment 263832 [details] Test reduction
Created attachment 264059 [details] Patch
Comment on attachment 264059 [details] Patch r=me
Created attachment 264091 [details] Patch
Comment on attachment 264091 [details] Patch Clearing flags on attachment: 264091 Committed r191610: <http://trac.webkit.org/changeset/191610>
All reviewed patches have been landed. Closing bug.