Bug 269558 – iOS: massive performance issue when using nested grid layouts

• Status: NEW
• Component: Layout and Rendering

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!

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]

<rdar://problem/123493924>

[Simon Fraser (smfr)]

I get "this link has expired" for https://qj3kqmk64sbn97rk-81622204724.shopifypreview.com/collections/all

(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