I have a mobile specific issue with an autoplaying/looping slideshow UI. The carousel smooth scrolls as multiple slides are displayed on the screen at any time. So it’s basically like a conveyor belt. To achieve this I’m using Keen Slider.
It’s maybe worth noting I haven’t used a CSS solution for this and needed a plugin/Javascript as I want the carousel to be draggable left/right.
I’ve tested on iOS (iPhone 15 Pro), the issue occurs on both Safari and Chrome browsers. I’m not sure if this also affects Android as well - but I think the issue is linked to the resizing of the URL bar when scrolling the page.
On load, everything displays correctly but when you initially scroll down the page, even a few pixels, the carousel jumps/realigns horizontally to the left edge of slide nearest to the left edge of the container. After this, the carousel behaves perfectly and you don’t seem to ever see the ‘bug’ again when scrolling up/down the page unless you reload the page. It only seems to occur on the first scroll.
Potentially reason for the issue
The assumption I’m making is it’s to do with the URL bar resizing and the carousel treating it as though the browser has been resized by the user. I believe this is due to the origin in Keen Slider - however there doesn’t seem to be any settings to disable.
But I believe this to be the case as you can also see the carousel jump into position on desktop if you resize the browser (not that that’s important to fix).
I appreciate this is difficult to test/view as a mobile issue - but hopefully the realignment on desktop resize might make it easier to debug if that is indeed the root of the issue
Would really appreciate some help and fresh eyes on this as I’m stumped!
It seems the issue is as you suspected and when the address bar hides on mobile as you scroll it triggers a resize event and your keen slider is designed to reinitialise on resize and therefore jumps.
Maybe a JS guru around here can suggest a solution. I tried triggering a resize in js but couldn’t seem to get it to work. Maybe theres a way to scroll the page down and back but I don’t think that’s easy for iios.
(The only css fix I could think of would involve making sure the slider is below the bottom of the viewport on small screens and then when you scroll to it you won’t notice the jump.)
Yeah, I tried a few things with the height but no cigar. I did manage to prevent the URL bar from resizing on another project (don’t remember how) but ideally I’d like to not resort to that.
It is interesting it only happens the first time.
I was going to try some other plugins but the drag/easing etc just wasn’t as good.
I also tried a bit of a hack where I scrolled the page 1-2px on load to see if I could trigger the realignment but the user wouldn’t notice it was so quick but that didn’t do anything either.
Yes I had some success with something similar but hard to know if it was working just for me or not.
Try this anyway:
function hideIOSAddressBar() {
// Scroll down a tiny amount
window.scrollTo(0, 1);
}
// Run the function once the page has loaded
window.addEventListener('load', hideIOSAddressBar);
It doesn’t actually hide the address bar but it seems to stop the jump for me locally but it may just be a local thing.
