Bug of carousel on mobile phones

Question

I have an issue with Bootstrap v4.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 automatic 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">
  <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/

Answer 1

I have found the issue. Not sure how I would have missed that but i just removed the cdns of bootstrap and linked them again and it seems to work fine.