Bug 302529

<rdar://problem/165205359>

@Punit, is there a live website where this is happening?

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.

(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.

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.