Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nested grid performance in Safari #60

Open
syren opened this issue Nov 17, 2022 · 0 comments
Open

Nested grid performance in Safari #60

syren opened this issue Nov 17, 2022 · 0 comments

Comments

@syren
Copy link

syren commented Nov 17, 2022

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant