1256174 - tags in airbnb review UI overlap because negative inline margins on intrinsic widths is not interoperable

Status: RESOLVED INVALID

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

Description

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

The review UI on AirBNB is currently broken in Firefox (but works in Chrome); the tags overlap.

To see this UI, you need to have stayed at an AirBNB location and currently be able to write a review for it.

Comment 1

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

Attachment: screenshot (Chrome on left, Firefox on right)

Comment 2

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

Attachment: simple testcase

I wrote this simple testcase after examining the site in inspector (in both Firefox and Chrome; I didn't see any browser differences in the CSS or markup).

Comment 3

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

I don't think the behavior here is effectively defined by relevant specifications, since I don't think any spec defines intrinsic width calculation inside of inline layout.  There's a specification in early draft at https://drafts.csswg.org/css-sizing/#inline-intrinsic , but I'm not sure that it's stable enough to analyze what it says about this issue (and I don't think the prose that would explain the behavior in this case even makes sense).

Comment 4

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

(The site did also use white-space: nowrap, which does make a slight difference with the testcase.)

Comment 5

[Cameron McCormack (:heycam)]

(This is the issue from https://github.com/webcompat/web-bugs/issues/2341.)

Comment 6

[Cameron McCormack (:heycam)]

I noticed while also making a reduced test for this (before seeing your bug here) that if I replace the inputs with spans, then Chrome and Firefox agree on the layout (where as you increase the negative margin it decreases the computed width of the div).

Comment 7

[Karl Dubost💡 :karlcow]

Daniel,
is it related to Bug 1654934
Though the test case seems interoperable now in all browsers, so maybe close?

Comment 8

[James Graham [:jgraham]]

I think Karl meant https://bugzilla.mozilla.org/show_bug.cgi?id=1745310

Comment 9

[Daniel Holbert [:dholbert]]

(In reply to Karl Dubost💡 :karlcow from comment #7)

Daniel,
is it related to Bug 1654934
I think Karl meant https://bugzilla.mozilla.org/show_bug.cgi?id=1745310

Nope, I think it's not related; bug 1745310 is something specific to floats, and there aren't any floats in the reduced testcase here.

Though the test case seems interoperable now in all browsers, so maybe close?

I see different rendering in Safari; the "buttons" in dbaron's attached testcase (attachment 8730015 [details]) are spread out & not-overlapping there.

But it looks like Chrome matches us now; Chrome 75 was the last version to match Safari, and Chrome 76 and newer seem to match Firefox (I tested on macOS Monterey).

Given that comment 3 indicates this is a gray zone in terms of spec correctness, and given that the dominant browser now matches our behavior here, I think we can close this as "invalid" i.e. our-current-behavior-is-fine.