1646895 - {inc} Inline content in a box centred with auto margins next to a float reflows erratically on browser window resize

Status: NEW

(Core :: Layout: Floats, defect, P3)

Description

[david]

Attachment: ff-reflow-bug.html

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:77.0) Gecko/20100101 Firefox/77.0

Steps to reproduce:

Visited the attached HTML file in Firefox 77.0.1 on Ubuntu 18.04

Actual results:

On initial page load the layout is correct. The inline content flows around the float if the window is too narrow, and is flush with the left edge of its box if the window is wide enough for the centred box to not intrude into the float.

On browser window resize, the inline content reflows erratically. Starting with a wide window where the centred block and the floated block don't intersect, reducing the window width reveals problems when the text in the centred block collides with the float. Instead of flowing around the float, it overlaps it. This continues until the text hits the left edge of the float. At this point the correct behaviour occurs: the text in the centred block flows around the float.

From this point, expanding the browser window width reveals another problem. When the window is widened to the point where the centred box no longer intersects the floated box, the text in the centred box is shifted right and no longer flush with the left edge of its block. Reloading the page at this point restores correct layout.

Expected results:

Inline content within a block level box centred with left and right margins set to "auto" and a specified width or max-width show reflow properly on window resize when the box is next to a floated box.

Correct behaviour is observed in Chromium 83.0.4103.61 Built on Ubuntu , running on Ubuntu 18.04

Comment 1

[david]

Attachment: 1-good.png - correct layout on page load

Comment 2

[david]

Attachment: 2-bad.png - text overflows float on window resize

Comment 3

[david]

Attachment: 3-good.png - correct text flow around float when window is narrow enough for the centred block to hit the left edge of the window

Comment 4

[david]

Attachment: 4-bad.png - text does not reflow properly when window widened again

Comment 5

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 6

[Sean Voisen (:svoisen)]

Not sure how common this layout combination is in the wild — auto margins adjacent a float — but the resulting behavior is ... not great. So setting to S2.

Comment 7

[Emma Malysz]

Emilio, can you take a look at this and assign a relevant severity?

Comment 8

[Emilio Cobos Álvarez (:emilio)]

S2 seems fair. Daniel was looking at some float reflow statefulness in paged mode, and this might be the culprit?

Comment 9

[Daniel Holbert [:dholbert]]

The thing I was looking at is bug 1695509 comment 10, and it's specific to floats in a fragmenting context (printing or multicol), and float positions being (probably-improperly) preserved when being pulled from a prior continuation.

So, unlikely to have the same underlying cause as this bug.

Comment 10

[Daniel Holbert [:dholbert]]

(For what it's worth, I can reproduce this in Nightly 2011-01-01, version 4.0b9pre. So this isn't a regression or a recently-introduced bug.)

Comment 11

[Daniel Holbert [:dholbert]]

Dropping severity to S3 to reflect reality (we've been living this ~forever per comment 10; nice to fix, but probably not causing too much trouble).

Comment 12

[Roman Komarov]

Just in case: this is indeed an old bug, at least from 2011. I did reproduce it a long time ago, but forgot to properly report (oops) — https://web.archive.org/web/20111002053201/http://kizu.ru/lib/bugs/-moz-mautofloat.html

The bug can be reproduced with resizable containers as well (so not only windows): https://codepen.io/kizu/pen/GReRGKV