NEW266965
Elements wrap incorrectly when inside a grid which is inside a multiple columns layout (plus result in a paint bug) 
https://bugs.webkit.org/show_bug.cgi?id=266965
Summary Elements wrap incorrectly when inside a grid which is inside a multiple colum...
Roman Komarov
Reported 2024-01-01 04:22:08 PST
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).
Attachments
Saved CodePen html (2.96 KB, text/html)
2024-01-01 04:22 PST, Roman Komarov 		no flags
Details
Video of the bugs reproduced (11.74 MB, video/mp4)
2024-01-01 04:26 PST, Roman Komarov 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Roman Komarov
Comment 1 2024-01-01 04:26:10 PST
Created attachment 469253 [details] Video of the bugs reproduced
Radar WebKit Bug Importer
Comment 2 2024-01-08 04:23:19 PST
<rdar://problem/120640832>
Note You need to log in before you can comment on or make changes to this bug.