Bug 266965 – Elements wrap incorrectly when inside a grid which is inside a multiple columns layout (plus result in a paint bug)

• Component: Layout and Rendering
• Status: NEW

[Roman Komarov]

Created attachment 469252 [details]
Saved CodePen html

I was testing the way CSS grids behave when inside a multicol context, and while there is currently no interop with other browsers (Chrome and Firefox handle things slightly differently; Chrome being arguably the best, but not ideal), Safari, right now, has the biggest issues.

Here is a minimal test case: https://codepen.io/kizu/pen/dyrYvgR (I am also attaching the .html of this page to the bug)

In Safari, there are two issues:

1. Sometimes when elements wrap, they _do not wrap fully_, with lines being split in parts similar how an image could be split when going from one column's fragment into another.

2. With very specific conditions (in my case — grid having a `gap`, and paragraphs inside _not_ having a margin), resizing the container results in repaint bugs.

Marking initially as major severity due to the repaint bug; though the wrapping behavior can also be considered as such, preventing this use case (grids inside multicol) from being production-ready, and I did not find any workaround (neither any `page-break-inside` or things like making the inner elements `inline-block` help).

[Roman Komarov]

Created attachment 469253 [details]
Video of the bugs reproduced

[Radar WebKit Bug Importer]

<rdar://problem/120640832>