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.
Created attachment 435399 [details] The correct layout
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).
<rdar://problem/82113973>
This appears to be working now as far as I've tested. Please re-open the bug if the bug still reproduces.