Slideshow Text Vanishing on Your Shopify Store? A Quick Fix for Older iPhones

The Case of the Invisible Slideshow Text: A Shopify Mystery Solved

Ever run into a weird issue on your Shopify store that seems to only affect *some* of your customers? It's frustrating, right? Well, a recent discussion in the Shopify community highlighted one of those head-scratchers: disappearing slideshow text on older iPhones. Let's dive into what happened and, more importantly, how to fix it.

The Problem: Vanishing Act on Older iOS Versions

The user nurseaura.au reported that the text within the slideshow section of their Shopify store was completely invisible on iPhones running older versions of iOS (specifically, before 17.4). Imagine a potential customer landing on your site, seeing beautiful images in your slideshow, but no text explaining what they're looking at! Ouch.

The Culprit: Modern CSS vs. Legacy Browsers

So, what was causing this digital disappearing act? It turns out the issue lies in how the slideshow was built using CSS. The .slide__content class, responsible for displaying the text, was initially set to opacity: 0. The intention was to use the modern animation-timeline property to smoothly fade the text in as the slideshow progressed.

Here's the problematic code snippet:

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

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

The problem? Older versions of Safari on iOS don't support the animation-timeline property. As a result, the animation never triggered, and the text remained stubbornly at opacity: 0, effectively invisible. It's like trying to start a car with a key that doesn't fit – nothing happens!

The Solution: A Simple CSS Feature Query

Thankfully, nurseaura.au didn't just report the bug; they also provided a brilliant fix! The solution involves using a @supports feature query. This allows you to apply different CSS rules based on whether the browser supports a specific feature. In this case, we check for animation-timeline support.

Here's the corrected code:

.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;
  }
}

By setting opacity: 1 by default, the text becomes visible on all browsers. Then, the @supports query checks if the browser supports animation-timeline. If it does, the original animation code is applied, fading the text in as intended. If not (like on older iOS versions), the text simply remains visible.

How to Implement the Fix

Here's a step-by-step guide to implementing this fix on your Shopify store:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit and then click Actions > Edit code.
3. In the code editor, search for the base.css file. This might also be named theme.css or similar depending on your theme.
4. Locate the .slide__content class within the CSS file (around line 1803, according to the original post, but it might be different in your theme).
5. Replace the existing code for the .slide__content class with the corrected code provided above.
6. Click Save.

Why This Matters

This issue highlights the importance of testing your Shopify store on a variety of devices and browsers. While it's tempting to focus on the latest and greatest technology, a significant portion of your audience might be using older devices. Ignoring these users can lead to a poor user experience and potentially lost sales.

A Community Effort

It's also worth noting that this issue seems to affect multiple Shopify 2.0 themes, including Horizon, Pitch, and Fabric. As tim_1 pointed out in the community thread, these themes share similar codebases, making them susceptible to the same bugs. This underscores the value of community collaboration in identifying and resolving these issues.

Big thanks to nurseaura.au for not only identifying the problem but also providing a clear and effective solution! It's contributions like these that make the Shopify community so valuable. And to Laza_Binaery for also jumping in to help clarify the issue.