Bootstrap carousel causes mobile page to jump up

HTML-CSS
1

Hi guys.

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.

Here is link to my pen : http://codepen.io/irinabrennen/full/jmmedq/

To recreate the issue:

  1. With iPhone 6 or similarly sized device, click on the link
  2. Scroll down about half way until you see a carousel of photos.
  3. 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

Appreciate the help!

2

Hi,

Did you find an answer to your problem? I am confrunting with the same issue.

Please help!

3

Crissami - I did not :frowning: 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!

4

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)

#myCarousel {
    border: 5px solid white;
    height: 380px;
    overflow: hidden;
}

But the problem with this solution is the height is fixed, and you’d have to adjust height on different devices via use of media queries. Best solution: Resize all images to be of same size.

5

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.

6

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.

7

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.

8

Try copying the code from
http://getbootstrap.com/javascript/#carousel

9

Thank you, Owel, I will give it a try.

10

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…

11

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 :slight_smile:

12

Hi, I also got the same problem. Did anyone tried to open it with a android device, to see if it’s ios related ?

13

I am getting same issue…
In my case all images are of same size in all aspects. still it’s jumping to top

Thinking not to use bootstrap’s carousel

14

I had the same issue,my project had this codebody{direction:rtl}, when i deleted that code the problem was solved.