Bug 150271

Summary:

Floating box is misplaced after content change.

Product:

WebKit

Reporter:

Chris Rebert <webkit>

Component:

CSS

Assignee:

zalan <zalan>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

commit-queue, esprehn+autocc, glenn, hyatt, kondapallykalyan, microbeqc, simon.fraser, zalan

Priority:

Keywords:

HasReduction

Version:

WebKit Nightly Build

Hardware:

Mac

OS:

OS X 10.10

URL:

https://gist.github.com/cvrebert/14f296e3629e177da6c2

See Also:

http://code.google.com/p/chromium/issues/detail?id=544290

Bug Depends on:

Bug Blocks:

159753

Attachments:

Description	Flags
Screenshot of incorrect rendering	none
Screenshot of correct rendering, taken on a different refresh of same page	none
Complete self-contained testcase	none
Test reduction with no external dependency.	none
Test reduction	none
Patch	none
Patch	none

Description Chris Rebert 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.

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

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

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

Created attachment 263364 [details]
Complete self-contained testcase

Comment 3 Chris Rebert 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.

Comment 4 Carl Traversy 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>

Comment 5 zalan 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"

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

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

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

Created attachment 263832 [details]
Test reduction

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

Created attachment 264059 [details]
Patch

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

Comment on attachment 264059 [details]
Patch

r=me

Comment 10 zalan 2015-10-26 16:16:22 PDT

Created attachment 264091 [details]
Patch

Comment 11 WebKit Commit Bot 2015-10-26 16:36:48 PDT

Comment on attachment 264091 [details]
Patch

Clearing flags on attachment: 264091

Committed r191610: <http://trac.webkit.org/changeset/191610>

Comment 12 WebKit Commit Bot 2015-10-26 16:36:52 PDT

All reviewed patches have been landed.  Closing bug.