I need help with my Tribute Page project. I have a bootstrap carousel with photos in the middle of the page. Carousel works as expected on desktop/big screen. However, on my iPhone, as soon as carousel advances to the next slide, page seems to reload and jump to the top. I tried disabling the auto-advance feature of the carousel, but then problem still occurs when user advances the carousel manually.
With iPhone 6 or similarly sized device, click on the link
Scroll down about half way until you see a carousel of photos.
Either advance carousel manually or wait a few seconds for it to auto-advance
Actual Result : Page resets and top of the document ( pic of my hubby ) is displayed
Expected Result : Page does not scroll up during carousel navigation
Crissami - I did not I ended up moving my carousel to the top of the screen so the problem is not as apparent. Here is a link to the modified pen : https://codepen.io/irinabrennen/full/YVvWRy/ . I have also seen samples on the web where carousel is in the middle of the page in a separate iFrame, and it does have this issue. However, I did not want to go the iFrame route. Would still love learn what’s causing the issue and how to prevent it. If you learn of a solution, please do share!
The problem is the images you used in your carousel are all of different sizes… some taller, some shorter… thus, it will cause content to move up and down.
You can try setting a fixed height for your carousel and cropping any extra tall image. (But too small images will show blank area in carousel. The best fix is to resize all images used in carousel to be the same dimensions)
Owel - thank you so much for your response. The issue I am having is not so much with actual carousel jumping around b/c of different sized images. The bigger issue is that on mobile device ( in my case iPhone 6 ), it causes page to ( what appears to ) completely reset and scroll back to the top. For instance, I have some content above the carousel, but as soon as I click on the carousel to advance to the next photo, it causes everything to reset to the very top of the page, rendering carousel out of view, so that I have to scroll down to get to the carousel again.
I worked around it it by moving carousel to the top. This way I can scroll through carousel w/out having it disappearing from view with every click. However, if I set carousel to advance on its own, same issue happens when I’m looking at the content below the carousel. As soon as carousel auto-advances, page resets to the top where carousel is, and whatever I am looking at gets out of view.
I checked your codepen site on my iPhone 6S. There’s something weird going on with your carousel. If I click next, the photo slides to the left, but it leaves a blank area as it slides to the left, leaving an empty area… then the next photo immediately appears without any transition.
The normal behavior is when the carousel photo slides to the left, you should see both the old and the next photo sliding together in unison. There should never be a time where the carousel box is empty and without an image.
I’d suggest going to the Bootstrap website, and making sure your code is identical to their example.
Owel, I see what you mean. I wasn’t noticing it before, but you are right, on the iPhone, there is a blank page in between carousel transitions. Thanks for pointing it out. Not sure if the two issues are related. I copied the code from https://www.w3schools.com/bootstrap/bootstrap_carousel.asp, then customized it with my inputs. Only difference is that pictures are hosted on a different website, because codepen does not allow to upload pictures w/out upgrading to premium.
So not sure what is causing the problem.
Thanks again, Owel, for your suggestions. My carousel code is identical to the carousel code on the getbootstrap site. I’m thinking the bug maybespecific to IOS Safari browser. When viewing my webpage on my kids fire tablet Amazon Silk browser - neither of the issues ( white space between transition nor page resetting when carousel transitions ) are present. Will keep on investigating, perhaps I need to use vendor browser extensions to get this to work on iPhones or not display the carousel on iPhones at all…
Hi, i have the same problem, but i think it is up to iOS. Tried it on iPhone 7+ using Safari and Chrome, same thing, it takes me to the top of the page as soon as photos start sliding (carousel is at the top of the page btw).
Friend tried on Androind phone using Chrome, everything works perfectly on his device. So, it is up to iOS, there is probably some bug