I’ve been experiencing a display issue with the Horizon theme on some mobile devices. When visiting a product page, the product images don’t load and the entire page layout breaks/glitches.
I’ve tested this on:
iPhone X
Aquos R7
but working fine on Tecno Spark 30 pro
What’s strange is that everything looks perfectly fine in the Theme Editor preview, but the live published store shows this problem.
I also checked a few other stores running the Horizon theme and noticed the same issue on those stores too — so this doesn’t seem to be specific to my store setup.
Has anyone else run into this? Is there a known fix or workaround while we wait for a patch?
Would really appreciate any help from the community or a Shopify team member.
I would only say that the iPhone x is a decade old and as far as I can read, it’s locked up to ios16 (safari 16), which means it’s past Shopify’s standard support window of the “lastest two versions”. The Aquos R7 doesn’t seem to be a globally popular phone, and not sure of its browser capabilities.
I checked this on BrowserStack with an iPhone 13 on iOS 15 and it looks like subgrid is the cause.
On .product-information__grid the theme sets grid-template-columns: subgrid, and Safari 15 flags that value as invalid and drops it. Subgrid only shipped in Safari 16. With that declaration gone the grid has no column definition left, so the layout collapses into a single stack and the media gallery ends up sized wrong, which matches your screenshots.
I didn’t test an iPhone X specifically, but it’s capped at iOS 16 and a lot of them are still on 15 or lower, so the same thing would happen there. The Aquos R7 runs Chrome, so if it shows the same break it would be an older Chrome or WebView build without subgrid support. Worth confirming the exact browser version on that one.
The workaround is a @supports block with a flex or plain grid fallback for browsers without subgrid, but since this hits every Horizon store the fix really should come from Shopify.
Hey Everyone, thanks for the answers. Updated the chorme version on Aquos R7 and now its working fine. Now the issue is iPhones, still trying things on that.
This is a known issue with the Horizon theme - it uses newer CSS features (scroll animations and subgrid layouts) that older phone browsers like Safari on iPhone X or older Chrome versions don’t support. Since your Theme Editor uses a newer browser under the hood, you won’t see the problem there, but real visitors on older devices will.
The fix is to add a fallback in your code for browsers that don’t support these features, so the layout doesn’t break and images still show up properly. If you’re not comfortable editing the theme code yourself, it might be worth getting a developer to add that fallback for you - it’s a quick fix once someone’s in the code.
I’d test this in Safari on the iPhone X with the remote inspector open, because if the image block is breaking only there, you’ll usually see one CSS rule or script error causing the whole media area to collapse.
Since the Theme Editor is rendering in a newer browser, it can look fine there even when the live page falls over on older Safari.
Also check whether the product media wrapper is getting a fixed height or a grid value that Safari 15 doesn’t like, then see if the first image is actually loading or if the layout is breaking before the image request finishes.
This is a P0 availability issue, not just a cosmetic one: a shopper who cannot see the product cannot evaluate it. After applying the fallback, I’d verify it with a small device/browser cohort and track PDP load → image-ready → variant interaction → add to cart → checkout entry. Compare the affected Safari/Chrome versions with a working device, and log any JavaScript or CSS errors. If the image appears but interaction is still delayed, check LCP and add-to-cart rate separately. The cause looks browser/theme-related from the evidence so far, but the conversion impact still needs cohort data.
Hey, thanks for the reply. The issue is not only the product images. The variant selector and (product cards) on product page, home page and collection page are also affected. Can you please guide me to solve this issue as this affecting sales directly. Thanks
Your issue is that older browsers are just not compatible with newer theme code. Honestly, single code fixes are not the answer.
Obsolescence is an issue for everyone everywhere. The best thing you can do is advise and recommend people to upgrade their devices and browsers. As mentioned above, the iPhone X is 10 years old and its browser is no longer supported by current standards. If your sales are being affected by old technology, you should either accommodate that old technology with an older theme or advise to upgrade.
The fact that the Theme Editor works while the published store breaks, and that you’ve reproduced something similar on other Horizon stores, is useful information. That makes me suspect a difference between the editor and live storefront rather than just your product setup.
Since it’s also device-specific, I’d check whether the affected phones are using the same browser/version and whether the issue happens in a private/incognito window. If you can share the Horizon version and the browser versions on the affected devices, that would help narrow it down.
I’d also avoid making theme-code changes until those details are known, since the issue may be related to a specific Horizon release or mobile/browser combination.
Priyasha’s diagnosis is the right one — Horizon’s product-media grid leans on CSS subgrid and a scroll-driven animation-timeline, both unsupported before Safari 16, and when an older browser rejects the grid value the whole layout collapses instead of degrading. That’s why the Theme Editor (a modern browser) looks fine while iPhone X visitors see broken cards and variant pickers. The fix isn’t “wait for people to update their phones” or “revert to an old theme” — it’s a @supports not (grid-template-columns: subgrid) block that hands those browsers a plain flex/stack layout for the product grid, cards and variant picker. Contained, one-time CSS, no theme downgrade, and it doesn’t touch what modern browsers see.
