1876348 - CSS flexbox and CSS multi-column layout overlap edge case

Status: RESOLVED INVALID

(Core :: Layout: Flexbox, defect)

Description

[Michael C. Irvin]

Attachment: DefaultGlobe.png

With the bug https://bugzilla.mozilla.org/show_bug.cgi?id=1744363 released in FF122, CSS flexbox and CSS multi-column works and looks much better now with almost no overlapping issues.

However, it does appear there is still an edge case defect around certain types of icons and how they are sometimes sliced:

From https://github.com/piroor/treestyletab/issues/3361#issuecomment-1908601101 :

"TST's built-in icons like "folder", "globe" and so on are regularly rendered as "colored box, clipped with SVG mask", to render icons with arbitrary color. Firefox looks to be able to render such a box as sliced parts. On the other hand, favicons of webpages are rendered as an <img> HTML element, and Firefox looks to prevent sliced rendering for such an embedded image."

Brief (18s) video showing the behavior: https://github.com/piroor/treestyletab/issues/3361#issuecomment-1906371903

Environment: FF122, TST 3.9.20, Windows 10
Original TST bug report: https://github.com/piroor/treestyletab/issues/3361
Original TST -> Mozilla bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=1843228

Comment 1

[Michael C. Irvin]

Attachment: DefaultFolder.png

Comment 2

[BugBot [:suhaib / :marco]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout: Flexbox' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 3

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

Thanks for the report! It is good to know bug 1744363 helps.

"TST's built-in icons like "folder", "globe" and so on are regularly rendered as "colored box, clipped with SVG mask", to render icons with arbitrary color. Firefox looks to be able to render such a box as sliced parts. On the other hand, favicons of webpages are rendered as an <img> HTML element, and Firefox looks to prevent sliced rendering for such an embedded image."

Without a testcase showing the issue, it is hard for me to know exactly the problem. However, with the description above and the observation of the video, I guess the built-in icon is a <div>, and Firefox can slice it across the column boundary. For <img> and text, Firefox treats them as monolithic elements, and won't slice it; if they are not fit in current column, it will be pushed to next column.

If you still have access to the testcase, could you try if adding break-inside:avoid [1] to the built-in icon makes any difference? An alternative idea is to add break-inside:avoid to the box that contains the built-in icon and the text.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside

Comment 4

[Michael C. Irvin]

Thank you Ting-Yu for the ideas and suggestion.

I added the "break-inside:avoid" to the icon and that kept the icon intact. However, I was able to get the icon to be separated from the text ... although it was hard to reproduce and was certainly a better behavior than before the CSS. (break-inside.png)

I then tried to apply it to a parent span, but that resulted in some very strange behaviors ... actually fairly hard to describe.

Finally, I applied it to the "li" for the row and that seemed to work. I was no longer able to reproduce any slicing or breakages between the icon and the text. (CSS.png)

Comment 5

[Michael C. Irvin]

Attachment: break-inside.png

Comment 6

[Michael C. Irvin]

Attachment: CSS.png

Comment 7

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

Nice! Adding break-inside:avoid to the <li> flex container sounds like a good fix for the addon. Firefox does have some edge cases where break-inside:avoid might not work perfectly, but it should work on a flex container to prevent it from breaking across the multi-column boundary.

I then tried to apply it to a parent span, but that resulted in some very strange behaviors ... actually fairly hard to describe.

Note that if the parent <span> is actually a inline element, break-inside won't work because it only works on block-level elements.

I'm going to close this bug since the behavior in comment 0 and comment 4 doesn't look like a bug to me in rendering. There is no guarantee that the icon and text are rendered in the same column without a specific control like break-inside:avoid. The browser by default is trying to layout as much content as possible by slicing it, or if the space is not enough at the bottom of the column for a monolithic element, move it to the next column.

Let me know if you have other questions, and feel free to file a new bug. Thanks again for reporting!

Comment 8

[Michael C. Irvin]

Thank you for everything!