RESOLVED CONFIGURATION CHANGED 229027
Incorrect grid population with shadow DOM and display: contents 
https://bugs.webkit.org/show_bug.cgi?id=229027
Summary Incorrect grid population with shadow DOM and display: contents
Jeroen Zwartepoorte
Reported 2021-08-12 00:54:30 PDT
Created attachment 435398 [details] Layout bug in action So I've tried (and failed) to create a reproducible example here: https://codepen.io/jpzwarte/pen/ZEKwZmv What happens in Safari & STP is that with the given DOM structure of: ``` <my-container> <div class="wrapper"> <h1>Title</h1> <p>Body</p> <button>Button</button> </div> </my-container> ``` And with `my-container` having `display: grid; grid-template-rows: auto auto auto;`, Safari incorrectly puts the `<p>` on the first grid row. It looks like a reflow fixes the issue. The workaround here is to explicitly set `grid-row: 1` for the title and `grid-row: 3` for the button.
Attachments
Layout bug in action (187.12 KB, image/png)
2021-08-12 00:54 PDT, Jeroen Zwartepoorte 		no flags
Details
The correct layout (201.42 KB, image/png)
2021-08-12 00:55 PDT, Jeroen Zwartepoorte 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Jeroen Zwartepoorte
Comment 1 2021-08-12 00:55:45 PDT
Created attachment 435399 [details] The correct layout
Jeroen Zwartepoorte
Comment 2 2021-08-12 00:56:50 PDT
In the first screenshot, the table is shown below the buttons. In the DOM, the table is actually the 2nd element in the dialog and *should* be shown above the buttons and below the title. The second screenshot shows the correct order (after a reflow).
Radar WebKit Bug Importer
Comment 3 2021-08-19 00:55:18 PDT
<rdar://problem/82113973>
Ryosuke Niwa
Comment 4 2022-07-02 22:14:44 PDT
This appears to be working now as far as I've tested. Please re-open the bug if the bug still reproduces.
Note You need to log in before you can comment on or make changes to this bug.