Bug Report: Slideshow text invisible on older iOS versions (Fix included)

Ask & Offer
1

Hello Support Team,

I wanted to report a bug I encountered with the Slideshow Section on mobile devices running older versions of iOS (specifically tested on iPhone 14 running iOS < 17.4).

The Issue: The text/content inside the slideshow slides remains invisible.

The Cause: In base.css, the class .slide__content is set to opacity: 0 by default. It relies on the modern animation-timeline property to animate the opacity to 1.

Because older versions of Safari (iOS) do not support animation-timeline, the animation never triggers, and the text remains at opacity: 0 indefinitely.

The Fix: I was able to fix this by using a @supports feature query to ensure the content is visible by default on browsers that don’t support scroll-driven animations.

Here is the code change required in base.css (around line 1803):

Current Code (Broken):

CSS

.slide__content {
  opacity: 0;
  animation: slide-reveal both linear;
  animation-timeline: var(--slideshow-timeline);

  @media (prefers-reduced-motion) {
    opacity: 1;
    animation: none;
  }
}

Fixed Code:

CSS

.slide__content {
  /* Fix: Set opacity to 1 by default for unsupported browsers */
  opacity: 1;

  /* Only hide and animate if the browser supports animation-timeline */
  @supports (animation-timeline: view()) {
    opacity: 0;
    animation: slide-reveal both linear;
    animation-timeline: var(--slideshow-timeline);
  }

  @media (prefers-reduced-motion) {
    opacity: 1;
    animation: none;
  }
}

I hope this helps you patch the theme for other users!

2 Likes
2

HI @nurseaura.au

Welcome to the community. And this is a public forum, support team will not see this. You did not mention what theme that is but you can create an issue on GitHub there are both Dawn and Horizon themes there.

3

Thanks for letting me know. This issue spans all the shopify 3.0 themes like PITCH and Fabric. Honestly, they’ve made it hard enough to report bugs. I’ll let some intern figure this out using Claude or something. Glad I’m not dealing with it anymore, regardless, for those who are facing this issue: This is the fix for now.

2 Likes
4

True, I see now also, not open for contribution

But still, thank you for sharing this issue and the fix, as people who get the same problem should find this post.

5

Should’ve searched the forum first:

Also, worth noting that All Horizon family themes share the same theme code, so no wonder all of them are affected.

1 Like