Short description of issue
Layout borken in older mobile Safari on iOS and iPad OS
Link to Shopify Store
Reproduction steps
Lots of sections have broken layouts in Safari on iOS 13 and 14.
Additional info
None
What type of topic is this
Bug report
Hi @Asa_Carter, thanks for reaching out about this!
Horizon supports only the latest two iOS releases, which aligns with our theme store requirements. If many of your users are on older browser versions, I recommend working with a Partner to ensure compatibility.
Hi Paige,
This is not acceptable.
Fair enough if it was iOS 17 which only has a 3.5% market share but it also exists in the previous version iOS 18 which still has a 45% market share, almost equal to iOS 26!
Just to be clear, in your original post you mentioned issues on iOS 13 and 14 specifically. Now you’re talking about iOS 17/18, which sounds like a different scope.
Also, is this reproducible across multiple stores, or does it only happen on a single shop?
1 Like
Thanks for clarifying. I was able to confirm that the slide text in the Slideshow: Inset section isn’t visible on iOS 18 devices.
We’re planning to ship a fix for the latest iOS devices in the next Horizon release.
In the meantime, you can resolve this by updating base.css file. Replace lines 3247–3256 that reads:
.slide__content {
opacity: 0;
animation: slide-reveal both linear;
animation-timeline: var(--slideshow-timeline);
@media (prefers-reduced-motion) {
opacity: 1;
animation: none;
}
}
With the following:
.slide__content {
/* Default: visible for iOS versions earlier than 26 (no animation-timeline support) */
opacity: 1;
@supports (animation-timeline: auto) {
opacity: 0;
animation: slide-reveal both linear;
animation-timeline: var(--slideshow-timeline);
}
@media (prefers-reduced-motion) {
opacity: 1;
animation: none;
}
}
If you notice any other sections that aren’t rendering as expected on iOS 18, please let me know and I’ll be happy to take a look.
Perfect, thanks for your help!