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

RESOLVED INVALID

Status

()

RESOLVED INVALID
5 years ago
5 years ago

People

(Reporter: contact, Unassigned)

Tracking

22 Branch
x86
Mac OS X
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(URL)

Attachments

(2 attachments, 1 obsolete attachment)

(Reporter)

Description

5 years ago
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

5 years ago
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.
Flags: needinfo?(contact)
(Reporter)

Comment 2

5 years ago
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.
Flags: needinfo?(contact)
(Reporter)

Comment 3

5 years ago
Created attachment 786890 [details]
Firefox 22 OS X
(Reporter)

Comment 4

5 years ago
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

5 years ago
Created attachment 786891 [details]
Firefox22_OSX-902400.png

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

Comment 6

5 years ago
Created attachment 786893 [details]
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.
Attachment #786890 - Attachment is obsolete: true

Updated

5 years ago
Component: Untriaged → Layout: Block and Inline
Product: Firefox → Core
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.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → INVALID
(Reporter)

Comment 9

5 years ago
OK, thanks for that and the explanation makes sense.
You need to log in before you can comment on or make changes to this bug.