WebKit Bugzilla
New
Browse
Search+
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
NEW
269558
iOS: massive performance issue when using nested grid layouts
https://bugs.webkit.org/show_bug.cgi?id=269558
Summary
iOS: massive performance issue when using nested grid layouts
mic.gallego
Reported
2024-02-16 00:02:19 PST
Created
attachment 469916
[details]
Debugger tool Hello, First, please note that I have tried to create a minimal example to replicate the issue but could not. It seems the issue might be due to an intricate combination of nested layouts, and apparently, it might be due, to my testing, to the fact this store is in Hebrew (RTL language). I have, therefore, kindly asked the store owner not to delete those store copies so that Apple engineers can do a copy and investigate it (please note the preview links expire after 15 days). You can experience the slow version here:
https://qj3kqmk64sbn97rk-81622204724.shopifypreview.com/collections/all
And the "fixed" version here:
https://p3bx22hf1e0fozib-81622204724.shopifypreview.com/collections/all
The issue is mainly visible on iOS. It seems that on a Mac, the computer is fast enough to somehow mitigate the problem. When you scroll quickly through the page, you can see how the slow version has a lot of delay, with the cards not showing at all until the scroll position is settled. You can also see the big difference in the Safari performance debugger ; the slow version causes a lot of very long layout thrashing while the fast only have very short rendering. Interestingly, there is only one difference between those two versions. The only difference is that on the fast version, the div that wraps the product title and the price does not establish a CSS grid context, while the slow does. It, therefore seems that there is a condition that is causing a very poor scrolling performance when CSS grids are nested. Also, I have been able to find that the performance is much worse when the product title in the card is made of Hebrew and English (as it is the case in this store). I tried to replace product title to only contains an English text and it is much faster (but not as much as removing the grid context). Thanks a lot!
Attachments
Debugger tool
(234.30 KB, image/jpeg)
2024-02-16 00:02 PST
,
mic.gallego
no flags
Details
slow version establish a grid context here, fast version does not
(64.44 KB, image/png)
2024-02-16 00:03 PST
,
mic.gallego
no flags
Details
Nested grid depth reproduction
(4.77 KB, text/html)
2026-10-15 09:58 PDT
,
tim.sands
no flags
Details
View All
Add attachment
proposed patch, testcase, etc.
mic.gallego
Comment 1
2024-02-16 00:03:19 PST
Created
attachment 469918
[details]
slow version establish a grid context here, fast version does not (This screenshot show the only difference between the two versions: the slow version creates a CSS grid context for this div while the fast version does not)
Radar WebKit Bug Importer
Comment 2
2024-02-23 00:03:15 PST
<
rdar://problem/123493924
>
Simon Fraser (smfr)
Comment 3
2024-02-23 09:54:28 PST
I get "this link has expired" for
https://qj3kqmk64sbn97rk-81622204724.shopifypreview.com/collections/all
mic.gallego
Comment 4
2024-02-27 02:40:43 PST
(In reply to Simon Fraser (smfr) from
comment #3
)
> I get "this link has expired" for >
https://qj3kqmk64sbn97rk-81622204724.shopifypreview.com/collections/all
Hello, Sorry about that. Please try this URL:
https://www.glo-jewelries.com/collections/all?preview_theme_id=165738348852
tim.sands
Comment 5
2026-10-15 09:58:33 PDT
Created
attachment 481847
[details]
Nested grid depth reproduction In Safari 27, both on iOS and macOS, nested grid performance has regressed. In Safari 26, nesting a large number of grids, say 100, was relatively quick (< 100ms), however in Safari 27 the layout pass very quickly becomes on the order of seconds and seems to stall long before reaching 100 nested grids. Attached you'll find a reproduction scenario that is essentially adding additional wrapper grids around a three column grid and measuring the time it takes to render them. Simply click the "Run" button with the default settings (rows: 5, max depth: 16) and you'll see that in Safari 27 (27.0.1 and 27.2 beta) it takes several hundred milliseconds to render. This was effectively instant in Safari 26. You can see how changing the depth level or number of items at a given depth affects the performance further.
Sammy Gill
Comment 6
2026-10-16 11:45:28 PDT
It seems like this might have regressed somewhere between
313105@main
and
314007@main
Sammy Gill
Comment 7
2026-10-16 15:23:45 PDT
Looks like
https://commits.webkit.org/313927@main
is the culprit
tim.sands
Comment 8
2026-10-19 09:40:00 PDT
(In reply to Sammy Gill from
comment #7
)
> Looks like
https://commits.webkit.org/313927@main
is the culprit
Thanks for looking into it. Would you happen to have an idea on when there might be a fix?
Sammy Gill
Comment 9
2026-10-27 02:58:29 PDT
(In reply to tim.sands from
comment #8
)
> (In reply to Sammy Gill from
comment #7
) > > Looks like
https://commits.webkit.org/313927@main
is the culprit > > Thanks for looking into it. Would you happen to have an idea on when there > might be a fix?
Currently looking into what a fix would look like! Would you mind opening up a separate bugzilla for this so that we can track this issue specifically? It looks like this initial report was about performance on iOS specifically and it looks like your testcase demonstrates the issue on Mac as well. I would like to avoid conflating two different problems and also want to make sure you get credit for the bug report if you want :)
Note
You need to
log in
before you can comment on or make changes to this bug.
Top of Page
Format For Printing
XML
Clone This Bug