Bug of carousel on mobile phones

[ghost]

Hi Everyone,

hope you are all well during these tough times.

I have an issue with Bootstrap v4.5.0 Carousel that i cannot get past, i have looked online to find similar issue but i don't seem to find anything which is confusing.

When loading a page on iPhone the carousel slides twice the same image in any case if indicator is clicked or with the authomatic slide. please see code below. Also attached below there is an Heroku link so you can check the issue on a phone as well (please note i have not checked on Android devices as i don't own one)

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
   <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://scontent.fltn2-1.fna.fbcdn.net/v/t1.0-9/97087554_10157568429427872_2295505830386073600_n.jpg?_nc_cat=101&_nc_sid=dd9801&_nc_ohc=EKpvsglOk3IAX9Py33W&_nc_ht=scontent.fltn2-1.fna&oh=fb94e49d41d443272c2507f8b1759f46&oe=5EECA22E" alt="First slide">
      <div class="carousel-caption d-none d-md-block">
        <h5>Benvenuto allo Studio Odontoiatrico Associato Dr. M. e M. Licata</h5>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://scontent.fltn2-1.fna.fbcdn.net/v/t1.0-9/s960x960/99289016_10157586004457872_3467314234633748480_o.jpg?_nc_cat=102&_nc_sid=8024bb&_nc_ohc=fIZBMtey49YAX_5ayAc&_nc_ht=scontent.fltn2-1.fna&_nc_tp=7&oh=05fcf2eb72e639ae9092bcd7ad20a811&oe=5EEA0C36" alt="Second slide">
      <div class="carousel-caption d-none d-md-block">
         <h5>Chi Siamo <a href="/staff" class="btn btn-primary btn-sm"> Vai &raquo;</a></h5>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://scontent.fltn2-1.fna.fbcdn.net/v/t1.0-9/p720x720/98180802_10157586032592872_239014732453904384_o.jpg?_nc_cat=110&_nc_sid=8024bb&_nc_ohc=sMMh-yGOJtYAX8RUyro&_nc_ht=scontent.fltn2-1.fna&_nc_tp=6&oh=7479cde50b0b49b927dd9bd01a59198f&oe=5EEC6724" alt="Third slide">
      <div class="carousel-caption d-none d-md-block">
        <h5>Dove Siamo <a href="/contacts" class="btn btn-primary btn-sm"> Vai &raquo;</a></h5>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

https://studio-licata-test.herokuapp.com/

[ffoodd]

Could try with v4.5.0 (latest v4) if this is still an issue?

4.0 is more than two years old.

[ghost]

i have just upgraded the page to 4.5.0 but the issue is still there. also i want to mention that someone from Stackoverflow has tested it on android and apparently the issue doesn't seem to be there

[ghost]

It is now suddenly working. don't know what i have done but i must have definitely changed something. @ffoodd thank you!

[rohithramachandran]

This is happening again In the IPAD and Iphone X. Seems like its happening after IOS 13 update. Will post the video soon.

[pranavatoito]

[lYesterdaYl]

any updates on this issue?

[patrickhlauke]

cannot reproduce the issue in Safari on iPhone 7 nor iPad (7th Gen) iOS 13.7 (tested using https://getbootstrap.com/docs/4.5/components/carousel/#with-controls)

Note: from that video/animation above I'm gathering that was happening in 4.1 ? if so, check in 4.5/ latest please