Image Compare Stack

I just completed my first Foundry themed webpage … thrilled! danajohn302.com
I utilized the compare image stack on the opening page and about page, not for comparison more over to share images of like content.

That said the stack works as expected on a desk top, with mouse but on mobile devices, iPhone 8 &10 and iPads the touch screen is erratic? At times it’s somewhat smooth but most of the time it jumps around and indexes itself to the left side of the slider. The touch aspect of the arrows, on the three devices I have access to are not functioning like the mouse on a desk top. Maybe my set up is the issue? Maybe how I built those pages?
Any suggestions would be appreciated.

Dana

Hi there @danajohn – Welcome to the community!

What version of iOS are you using on those devices?

I notice in your example that the problem occurs when the device scrolls upwards or downwards while sliding the slider back and forth. This didn’t occur in my previous testing. My initial guess is that something changed in iOS 13 that may have brought this on.

So I think I can force iOS to behave a bit more, as you can see in this test (scroll down to middle-ish of the page to find the image compare). The browser can still be tricked sometimes by multiple fingers on the screen doing bi-directional scrolling, but even that seems hit-or-miss, which makes me think it is a weird browser bug. That said, the improvements I was able to make in this test do seem to remedy it outside of corner cases I think.

Hi Adam,
Thanks for responding so quickly! Yes all of the devices in question are using 13.1.3.
Your IOS force looks good on my cell. What would I have to do to get the same results on my site?

Dana

You can’t do anything on your end. This has to be implemented in an update. I’ve got some testing to do on it and a few other updates before I can push it out to everyone.

3 Likes