rachelandrew
Nested grid performance in Safari
I'm working on a project and have been trying to debug it for a couple days. I have a game with a drag and drop interface that uses several nested grids for the layout. The cards that are dragged are within a grid, and using GSAP's Draggable, they are cloned and dragged.
In Safari on iOS, there's a ~1s delay upon a card being picked up. I thought it was touch-related, but it was resolved when I removed the grid rules. I did some digging and found this example:
https://codepen.io/brendanmckenzie/pen/NWpKWez
There's a delay on desktop Safari, but its much more pronounced on iPad. If you remove the display: grid in the Codepen you'll see that clicking into the textarea is immediate, and both fields have a 1-2s delay when CSS grid is on. On desktop the issue is the speed on the nested textarea, but on iPad they are both equally slow.
My UI uses a lot of previously reported things that Safari takes issue with (intrinsic/extrinsic sizing, etc) but the above Codepen illustrates that it's just plain grid that has the performance issue.
Is this known? Is there anything I can do to debug this further? Any suggestions?
I just spent a whole week to find why my nested webcomponents were lacking performance on iOS and that was because of the nested display: grid...
Having the same issue, multiple nested grids are causing very slow performance on safari, making subgrid pretty much unusable.
We started to migrate some of our webapp components to use subgrid and ran into this issue.
Chrome and Firefox work without problems whereas Safari shows a the spinning ball and makes the whole page unresponsive. The only option is to completely close out of the page.
The codepen in the original example has a lot of nesting, but we get the same issue with a subgrid at 3 levels
The issue has halted us being able to migrate our webapps to use grid and subgrid.
@Punit-Rathod Only way I have managed to get this work without a total refactor was using a master grid class for each section / div and then nested subgrids within each section, runs on safari this way and doesn't cause an endless repaint on safari.
I've include another codepen example: https://codepen.io/Punit-Rathod-the-selector/pen/JoPEbBw
Note the amount of nesting is minimal. The performance degrades as you add more rows either via adding divs or increasing grid-row: span XXX
@theconsigliere We can't add master grids to each section as all sections need to have aligned rows and columns for the layout without using magic numbers to force alignment.
I just moved from grid into flexbox... I got I little breath for a while but it start degrades as well in the long run... https://stackoverflow.com/questions/75435931/safari-nested-flexbox-performance-issue
You can find Safari webkit bugs opened in relation to this here: https://bugs.webkit.org/buglist.cgi?bug_status=UNCONFIRMED&bug_status=NEW&bug_status=ASSIGNED&bug_status=REOPENED&component=Layout%20and%20Rendering&list_id=12735319&product=WebKit&query_format=advanced&short_desc=nested%20grid&short_desc_type=allwordssubstr