902400 - Overflowing inline elements wrap with nested inline-table or inline-block

Status: RESOLVED INVALID

(Core :: Layout: Block and Inline, defect)

Description

[Ben Frain]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1588.0 Safari/537.36

Steps to reproduce:

Here is a test case: http://codepen.io/benfrain/pen/anDmL


Actual results:

The internal items wrap under one another.


Expected results:

The items should be laid out one after the other in a scrollable area (this is how it appears in WebKit/Blink - check that example out in each browser to see the difference).

Comment 1

[Loic]

I see that with FF23 on Win 7: http://i.imgur.com/w8oMlo2.jpg
Is it normal?

Could you attach a screenshot of what you see with FF23 on Mac OSX and with a different browser, please.

Comment 2

[Ben Frain]

You're image shows what I believe to be correct layout (and how it renders in Chrome and Safari for instance). I have attached how this displays on Firefox 22 OS X as a screen grab.

Comment 3

[Ben Frain]

Attachment: Firefox 22 OS X

Comment 4

[Ben Frain]

Also now checked this on v23 of Firefox on OS X and it is the same as the screen grab I have provided (e.g. broken)

Comment 5

[Loic]

Attachment: Firefox22_OSX-902400.png

.tiff is not really user friendly, better to attach pics as jpeg or png. ;)

Comment 6

[Loic]

Attachment: screenshot FF25 vs IE9.jpg

I think we have the same rendering on Win 7 and OSX, in fact.
If I resize the browser window, I get the same rendering as you.

Comment 7

[Boris Zbarsky [:bzbarsky]]

You have a <div class="inner-window"> that's a table.  It has a bunch of inline kids with spaces between them, and each of those has an inline-table child.

So all the kids get wrapped in a single cell.  Now you have a table cell with a bunch of space-separated inlines in it.  Why wouldn't a browser wrap those at the spaces to prevent overflow?

The inlines themselves are styled "white-space: nowrap", but that shouldn't affect whether wrapping can happen _between_ them, per spec.  

Now WebKit is very buggy in this situation: it disappears the spaces for some reason, which is totally bogus per spec.  You can see it in this simple testcase in WebKit:

  data:text/html,<div style="display:table"><span>a</span>%20<span>b</span></div>

I just tested Opera, and it handles my small testcase correctly (leaves the space) and has the same rendering as us on the original testcase, as expected.

If you don't want wrapping between the inlines, you need to either remove the linebreak opportunities or set their parent to nowrap.

Comment 8

[Boris Zbarsky [:bzbarsky]]

I filed https://bugs.webkit.org/show_bug.cgi?id=119544 and http://code.google.com/p/chromium/issues/detail?id=269500

Comment 9

[Ben Frain]

OK, thanks for that and the explanation makes sense.