Modern Sliders don't like Safari?

None of the sliders on the Modern Sliders demo page work on mobile Safari. They can’t be interacted with and they don’t auto play either. I use 1Blocker to block ads and scripts in Safari but disabling that doesn’t help. Everything does work correctly in the Brave browser on iOS.

EDIT: stacked sliders seem to be unaffected by this issue, those do work correctly.

iPhone XS Max running iOS 14.8.1

1 Like

They work fine on mine. iPhone 11 on 15.1
I have the purify content blocker and they work fine with it both on and off

Thanks @spedney

That’s strange. Just tried it on an iPad as well on iPadOS 15.1 and the sliders don’t work there either.

Thanks @JvP,

We’ve done quite a bit of testing in Safari as well and they’re working. I’m not sure what else there is to go on here. One thing that might be happening is that page is just massive - maybe it’s not fully loading.

Super strange. I’m viewing your Modern Sliders demo page and one of my own that has fewer sliders on it. Only the stacked sliders work. Pages are fully loaded. I had some experimental Safari browser features enabled but still no luck with those disabled either.

I was about to open a topic on this.

I can confirm that my client is on Safari 12.1.2 on an iMac and having this issue where literally nothing shows up where the Modern Slider is located when you load the page.

@JvP Which version are you using? :slight_smile:

Choose Safari from the top menu, and About Safari. The version number will be on the window that pops up.

Hey @tomr96, I’m working on a Windows machine 95% of the time so I have not tried this on desktop Safari, only on mobile Safari.

1 Like

Also to note on this @alexander - this is when purchased and implemented on my own site they are not displaying - but nothing has been changed with them, just paid, downloaded and imported.

Thanks, Tom.

If the sliders are not showing for you then you might be experiencing a different issue. For me the sliders do show, they just don’t autoplay and the next/prev and navigation elements don’t do anything. The sliders can’t be navigated.

Hey :smiley:

Yeah - same for me! I’m not a Mac guy :stuck_out_tongue:

Tested here on BrowserStack.com

What it should look like is:

image

Haha, I do like Macs and I think macOS is pretty great. Just don’t have a Mac :sweat_smile:

It looks like your issue is different from mine though.

1 Like

Haha got ya!

Ahh okay - well I’ll leave it in the topic as it’s on the Don’t like Safari sort of vibe, see what Alex thinks this might be.

Might be linked :confused:

Absolutely. If Alexander can’t figure it out then it must be some kind of voodoo magic.

1 Like

Hey @alexander,

I’ve found what was breaking the sliders in Safari on iOS. The Intersection Observer experimental WebKit feature must be enabled in Settings > Safari > Advanced > Experimental Features. With this feature turned off, horizontal sliders won’t work correctly. Coincidentally this also fixes this issue :grinning:

This information may be useful to your support staff in case somebody else runs into the same issue.

Thanks for all the additional info here. I’m surprised that intersection observer would be causing an issue. It might be an older iOS/Safari version perhaps.

No problem.

I’m currently still on iOS 14.

Ok, thanks!

1 Like