Bug 268595 – Nested subgrid causes page to hang

• Status: NEW
• Component: Layout and Rendering

[Mendel Gordon]

Created attachment 469668 [details]
Basic html you can use to replicate the issue

I'm trying to use a nested subgrid and the page won't load on safari on my mac or my iphone.
I tested it on webkit-main and it won't load there either - the page just hangs.
I'm trying to have the header overlap the hero, and make everything else below them, but not have the rest of the items overlap.
Opening the attached html works fine in chrome and firefox but won't open in webkit and or safari.

[Mendel Gordon]

Loading this html in safari or webkit doesn't work either - it's a simpler version:
<style>
	#a {
		display: grid;
	}

	#a div {
		display: grid;
		grid-template-columns: subgrid;
		grid-template-rows: subgrid;
		grid-row: 1/99;
	}
</style>

<div id="a">
	<div id="b">
		<div id="c">
			<div id="d">
				<div id="e">
					<div style="width: 100px; height: 100px; background-color: red"></div>
				</div>
			</div>
		</div>
	</div>
</div>

Here's a screenshot showing how the page loads in chrome and firefox but not webkit:
https://shottr.cc/s/VTFo/SCR-20240201-um9.jpeg
The webkit windows on the right are just showing the page they were on before I tried navigating to the problematic code.

[Radar WebKit Bug Importer]

<rdar://problem/122597208>