1720168 - column visual artefacts when breaking flex containers (styled by boostrap)

Status: NEW

(Core :: Layout: Columns, defect)

Description

[cdalxndr]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:89.0) Gecko/20100101 Firefox/89.0

Steps to reproduce:

Using responsive column-count depending on device width.
column-count 2 and 3 show visual artifacts.
Original issue: https://github.com/twbs/bootstrap/issues/34473
Test case: https://codepen.io/cdalxndr/pen/xxdEPWP

Actual results:

Text is misaligned and row is split between columns.

Expected results:

Clear column separation and no misalignment.

Comment 1

[cdalxndr]

Attachment: column-count-3.png

Comment 2

[cdalxndr]

Attachment: column-count-2.png

Comment 3

[cdalxndr]

Here's a simplified test case: https://codepen.io/cdalxndr/pen/LYybega
The text misalignment is not reproductible in this test, only the slippage into the second column when column-count=2.

Comment 4

[cdalxndr]

Attachment: simplified-column-count2.png

Comment 5

[cdalxndr]

The simplified test case is reproductible also in Chrome and Edge browser, and they look visually the same.

Comment 6

[Alice0775 White]

Regression window:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=97855f04050aad83a2b4249edcffa282c9ad05ec&tochange=76aa4bf4eabd44912cc33a4ccd4d5474fc0e2ca7

Comment 7

[Ting-Yu Lin [:TYLin] (PST, UTC-8)]

Our flex container fragmentation isn't perfect, and there may be some chance to refine the break opportunities. The original testcase does look better in Chrome, but bootstrap adds a lot of style in nested DOM tree, so it may require more analysis to figure out what rendering is more reasonable.