Horizon Theme - Slideshow text not showing on Firefox, iPad etc

[FGVPhoto]

Hi there,

I am having an issue with the Slideshow section on the Horizon theme. Essentially, the text and buttons disappear in certain browsers and devices. The slides still show and cycle through. I have tried a million things to fix it but I am totally at a loss.

This issue affects the “Slideshow” and “Slideshow: Inset” sections. The “Layered Slideshow” seems to work fine.

All devices and browsers are up to date. Horizon Theme Version 3.2.1. (latest). Site:

FGV Photography

Works on:

• Macbook: Safari/Chrome.
• iPhone 16 Pro: Safari/Chrome/Firefox.

Doesn’t work on:

• Macbook: Firefox
• iPhone 15 Pro: Safari (haven’t tried other browsers)
• iPad Air M1: Safari/Chrome/Firefox.
• Other iPhone versions: hit and miss

Fairly confusing as to why it works on some devices and not in others, especially why would it work on an iPhone 16 Pro and not on the 15 Pro!

I have also tried a fully stock/clean Horizon theme, just adding the slideshow and nothing else, and it has the same issue. Is this something related to the Horizon theme that has not been polished?

For context, I have another Shopify store running the old Dawn theme and the slideshow works perfectly in all devices and browsers.

I am attaching a screenshot on Desktop Firefox where the text and buttons are gone:

Lastly, I am 99% sure that weeks ago I tested the website on the iPad and the text and buttons were there. I see that in the last Horizon updates there’s been tweaks to the slideshow module, so perhaps the developers introduced issues?

Cheers,

Fernando

[Qasim]

Hey @FGVPhoto!

It’s really wiered that the text is not showing for the Firefox Browser.

Have you create this Slideshow with custom coding or you’re using the Theme slideshow?

Also, can you tell me if you’ve added any custom code in it.

[FGVPhoto]

Hi Qasim,

Yes, it is so strange that Firefox (Desktop) is not showing the text/buttons!

This slideshow is the standard coming on the Horizon theme. I did indeed add a little extra custom css, but removing it doesn’t make a difference. As mentioned on my first post, if I add a fully brand new Horizon theme and I create a slideshow, I can still see the same issue. So this leads me to think that this issue is not on my website, but might be affecting every single website running the Horizon theme…

It should be a very easy issue to replicate for the developers - just add a new Horizon theme to your site, add a slideshow, and test it out!

[FGVPhoto]

Additional piece of information that might help the pros here:

I’ve just noticed that there was a new iPad OS update for the iPad (26.2). I upgraded it and… magic, the text now shows on all browsers (Safari/Chrome/Firefox).

However, I have noticed another thing: the text on the second slide only shows correct on the first cycle. When the slides cycle a second time, the text disappears on the second slide (only). This affects the iPhone and iPad, not the Mac.

Perhaps better to run away from the Slideshow feature until further notice hey…

[tim_1]

In version 3.2.0 they’ve added a strange 'slide-reveal` animation which cycles slide content opacity from 0 to 1 and back:

assets/base.css

and:

assets/base.css

Looks like animation-timeline: var(--slideshow-timeline); is not compatible with Firefox yet.

I guess the idea is that textual slide content should reveal and hide as slideshow is scrolled from one slide to another (and it does in Chrome), but they did not check compatibility properly.

Browser compatibility - animation-timeline - CSS | MDN

In Chrome:

In Firefox:

There are several dubious changes in this version of the Horizon, unfortunately.

For now, you can fix this by adding code like this into “Custom CSS” of this section:

.slide__content {
  opacity: 1;
  animation: none;
}

Had to install Firefox to see this may keep it though…

[FGVPhoto]

@tim_1

.slide__content {
  opacity: 1;
  animation: none;
}

Hey tim_1!

This is epic, your fix totally did the trick in all browsers and devices. Such talent, thanks a lot for your help!! You are a star :-)!!!