302529 2025-11-14 05:23:32 -0800 Nested grids performance degradation 2026-01-13 01:55:48 -0800 1 1 1 Unclassified WebKit Layout and Rendering Safari 26 All All NEW https://bugs.webkit.org/show_bug.cgi?id=232176 https://bugs.webkit.org/show_bug.cgi?id=304869 https://codepen.io/Punit-Rathod-the-selector/pen/JoPEbBw BrowserCompat, InRadar P2 Normal --- 1 punit.rathod webkit-unassigned bfulgham karlcow nipun_shukla rreno sgill26 simon.fraser webkit-bug-importer zalan oldest_to_newest 2158770 0 477394 punit.rathod 2025-11-14 05:23:32 -0800 Created attachment 477394 html file demonstrating the performance issue A nested grid with large number of rows causes significant performance issues in Safari. Chrome and Firefox work without problems. Codepen example and html file with a demo are attached 2160541 1 webkit-bug-importer 2025-11-21 05:24:11 -0800 <rdar://problem/165205359> 2162040 2 karlcow 2025-11-30 16:17:18 -0800 @Punit, is there a live website where this is happening? 2162131 3 punit.rathod 2025-12-01 01:41:12 -0800 I originally came across the issue when trying to implement a new ui in our PWA www.wealthposition.com. We had to abandon the ui refresh because of this Safari issue. You can find a couple of other developers who complained about it here https://github.com/rachelandrew/gridbugs/issues/60 We do still have one component in our app which uses it, except we have to turn off nested grid and use the following hack workaround to make the page usable in Safari: - Use css @supports to detect when a user is on Safari - Turn off the native css nested grids - use a .js script to resize the nested grids on every user interaction to keep everything in line. To see how the component performs in Safari (without the hacky workaround), you would have to: - Log in - Go to Budgets (using the left navigation menu) - Create several grouped categories and budget rules - Open web inspector, find the following css selector and turn it off: @supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) { .u-grid__subgrid {........} } If I let the native subgrid css run in Safari, the whole page becomes unresponsive - this is on an M1 Mac mini, Intel based Safari was much worse and would require force closing Safari. Chrome, Firefox, Samsung all work without any performance issues, including on low powered mobile devices which is what the PWA is supposed to work on as a minimum. The nested grids are used for presenting a budget report with lots of rows (categories) and columns (months) which need to be aligned in a grid. Each row can have nested rows, and you can click a row to expand it to see the rules assigned to the category. The nested rows are typically just 3 layers i.e. Group > Categories in group > rules in category and there would be 12 columns, one for each month. Just a few categories and rules is sufficient to crash Safari. 2162135 4 punit.rathod 2025-12-01 01:47:08 -0800 (In reply to Karl Dubost from comment #2) > @Punit, is there a live website where this is happening? Apologies, I posted a new comment instead of a reply to your comment. My response in in the comment before this one. 2162144 5 punit.rathod 2025-12-01 02:13:30 -0800 I also wanted to say, even if the problem ever gets fixed, we would still have an issue in that we have no way of knowing if a user is running a version of Safari where the problem no longer exists because there is no @supports method to identify this. We are therefore now in a position where we can't really used subgrids in our website for several years. This is even though subgrid hit the "Baseline" standard for all major browsers back in 2023. 2171375 6 nipun_shukla 2026-01-13 01:55:48 -0800 This seems to have been fixed in 305121@main. 477394 2025-11-14 05:23:32 -0800 2025-11-14 05:23:32 -0800 html file demonstrating the performance issue nested_grid_performance_issue_example.html text/html 2007 punit.rathod PGh0bWw+CiAgPGhlYWQ+CiAgICA8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoKICAgICAgLmdyaWQg ewogICAgICAgIGRpc3BsYXk6IGdyaWQ7CiAgICAgICAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiBh dXRvOwogICAgICB9CgogICAgICAuc3ViZ3JpZCB7CiAgICAgICAgZGlzcGxheTogZ3JpZDsKICAg ICAgICBncmlkOiBzdWJncmlkIC8gc3ViZ3JpZDsKICAgICAgICBncmlkLWNvbHVtbjogMSAvIC0x OwogICAgICAgIGdyaWQtcm93OiBzcGFuIDMwMDAgLypJTkNSRUFTRSBGT1IgTU9SRSBKQU5LKi8K ICAgICAgfQoKICAgICAgLnN1YnJvdyB7CiAgICAgICAgZGlzcGxheTogZ3JpZDsKICAgICAgICBn cmlkLXRlbXBsYXRlLWNvbHVtbnM6IHN1YmdyaWQ7CiAgICAgICAgZ3JpZC1jb2x1bW46IDEgLyAt MTsKICAgICAgfQoKICAgIDwvc3R5bGU+CiAgPC9oZWFkPgoKICA8Ym9keT4KICAgIDxkaXYgY2xh c3M9ImdyaWQiPgoKICAgICAgICA8ZGl2IGNsYXNzPSJzdWJncmlkIj4KICAgICAgICAgICAgPGRp diBjbGFzcz0ic3Vicm93Ij4KICAgICAgICAgICAgICAgIDx0ZXh0YXJlYT5SZXNpemUgbWUgaW4g U2FmYXJpIHRvIHNlZSBqYW5rLjwvdGV4dGFyZWE+CiAgICAgICAgICAgIDwvZGl2PgogICAgICAg IDwvZGl2PgoKICAgICAgICA8IS0tIEFERCBST1dTIEZPUiBNT1JFIEpBTksgLS0+CiAgICAgICAg PGRpdiBjbGFzcz0ic3ViZ3JpZCI+PGRpdiBjbGFzcz0ic3Vicm93Ij5Sb3c8L2Rpdj48L2Rpdj4K ICAgICAgICA8ZGl2IGNsYXNzPSJzdWJncmlkIj48ZGl2IGNsYXNzPSJzdWJyb3ciPlJvdzwvZGl2 PjwvZGl2PgogICAgICAgIDxkaXYgY2xhc3M9InN1YmdyaWQiPjxkaXYgY2xhc3M9InN1YnJvdyI+ Um93PC9kaXY+PC9kaXY+CiAgICAgICAgPGRpdiBjbGFzcz0ic3ViZ3JpZCI+PGRpdiBjbGFzcz0i c3Vicm93Ij5Sb3c8L2Rpdj48L2Rpdj4KICAgICAgICA8ZGl2IGNsYXNzPSJzdWJncmlkIj48ZGl2 IGNsYXNzPSJzdWJyb3ciPlJvdzwvZGl2PjwvZGl2PgogICAgICAgIDxkaXYgY2xhc3M9InN1Ymdy aWQiPjxkaXYgY2xhc3M9InN1YnJvdyI+Um93PC9kaXY+PC9kaXY+CiAgICAgICAgPGRpdiBjbGFz cz0ic3ViZ3JpZCI+PGRpdiBjbGFzcz0ic3Vicm93Ij5Sb3c8L2Rpdj48L2Rpdj4KICAgICAgICA8 ZGl2IGNsYXNzPSJzdWJncmlkIj48ZGl2IGNsYXNzPSJzdWJyb3ciPlJvdzwvZGl2PjwvZGl2Pgog ICAgICAgIDxkaXYgY2xhc3M9InN1YmdyaWQiPjxkaXYgY2xhc3M9InN1YnJvdyI+Um93PC9kaXY+ PC9kaXY+CiAgICAgICAgPGRpdiBjbGFzcz0ic3ViZ3JpZCI+PGRpdiBjbGFzcz0ic3Vicm93Ij5S b3c8L2Rpdj48L2Rpdj4KICAgICAgICA8ZGl2IGNsYXNzPSJzdWJncmlkIj48ZGl2IGNsYXNzPSJz dWJyb3ciPlJvdzwvZGl2PjwvZGl2PgogICAgICAgIDxkaXYgY2xhc3M9InN1YmdyaWQiPjxkaXYg Y2xhc3M9InN1YnJvdyI+Um93PC9kaXY+PC9kaXY+CiAgICAgICAgPGRpdiBjbGFzcz0ic3ViZ3Jp ZCI+PGRpdiBjbGFzcz0ic3Vicm93Ij5Sb3c8L2Rpdj48L2Rpdj4KICAgICAgICA8ZGl2IGNsYXNz PSJzdWJncmlkIj48ZGl2IGNsYXNzPSJzdWJyb3ciPlJvdzwvZGl2PjwvZGl2PgogICAgICAgIDxk aXYgY2xhc3M9InN1YmdyaWQiPjxkaXYgY2xhc3M9InN1YnJvdyI+Um93PC9kaXY+PC9kaXY+CiAg ICAgICAgPGRpdiBjbGFzcz0ic3ViZ3JpZCI+PGRpdiBjbGFzcz0ic3Vicm93Ij5Sb3c8L2Rpdj48 L2Rpdj4KICAgICAgICA8ZGl2IGNsYXNzPSJzdWJncmlkIj48ZGl2IGNsYXNzPSJzdWJyb3ciPlJv dzwvZGl2PjwvZGl2PgogICAgICAgIDxkaXYgY2xhc3M9InN1YmdyaWQiPjxkaXYgY2xhc3M9InN1 YnJvdyI+Um93PC9kaXY+PC9kaXY+CiAgICAgICAgPGRpdiBjbGFzcz0ic3ViZ3JpZCI+PGRpdiBj bGFzcz0ic3Vicm93Ij5Sb3c8L2Rpdj48L2Rpdj4KICAgICAgICA8ZGl2IGNsYXNzPSJzdWJncmlk Ij48ZGl2IGNsYXNzPSJzdWJyb3ciPlJvdzwvZGl2PjwvZGl2PgoKICAgIDwvZGl2PgogIDwvYm9k eT4KCjwvaHRtbD4K