1550158 - Blink and Gecko differ on where to flow absolutely-positioned element in a tight layout

Status: UNCONFIRMED

(Core :: Layout: Positioned, defect, P4)

Description

[Thomas Wisniewski [:twisniewski]]

In the attached test-case, two select boxes are intended to be hidden with opacity:0, and have a replacement visual overlaid on top of them.

The visual overlays are 320px wide in a 320px wide container, and the selects are absolutely positioned, so it seems that they ought to end up in the right places, as per Chrome's layout.

However, Firefox places the second select outside (to the right) of the container, as though there is room for it on the flow-line next to the first 320px-wide overlay.

This is causing breakage of the select boxes at www.nextgreencar.com, as reported at webcompat.com

Comment 1

[Thomas Wisniewski [:twisniewski]]

Attachment: test.html

Comment 2

[Emilio Cobos Álvarez (:emilio)]

So this is about where do we guess the hypothetical position is.

If instead of a <select> you use a <div> like:

<div style="position: absolute;width: 80px;height: 40px;background: green;display: inline-block;"></div>

Then toggling display and hovering over devtools I can see the <div> jump around.

Comment 3

[Mats Palmgren (inactive)]

Removing the whitespace in-between the elements makes Chrome render it the same as Gecko.
Seems like a pretty weird edge case to me.

Comment 4

[Dennis Schubert [:denschub]]

ni? Tom for a potential WebCompat KB entry.

Comment 5

[Ksenia Berezina [:ksenia]]

The site issue in https://webcompat.com/issues/27547 is no longer reproducible as it's redirecting to a different site with updated design, resetting webcompat priority. The test case is still presenting a difference in Chrome and Firefox.