Bug 269558

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!