My Bootstrap Image Carousel is sort of sliding twice for each slide on Mobile devices

This is quite a difficult issue to explain without seeing it so I will include a link to where you can view the website so you can see for yourselves.

Basically, my Bootstrap image slide works perfectly on my desktop, however, when I view it on my iPhone X each slide sort of slides twice (or bounces?) for each transition.

It might be worth noting that it does NOT do this when I view it on an iPhone 7 (it works perfectly).

I cannot for the life of me work this out, and have tried researching it but appears no one has posted this same issue before...

It seems like an iPhone issue and hopefully the fact that it works on an iPhone 7 but not an iPhone X could help solve it?

Website Link

/* Jumbotron Carousel */

.preload {
  display: none;
}

.carousel-inner .carousel-item {
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
  transition: transform 0.4s ease, -ms-transform 0.4s ease;
  transition: transform 0.4s ease, -o-transform 0.4s ease;
  transition: transform 0.4s ease, -moz-transform 0.4s ease;
}

.jumbotron .container {
  height: 500px;
}

.carousel-inner {
  width: 100%;
  height: 450px;
}

.carousel-indicators:hover {
  cursor: pointer;
}

.carousel-control-next {
  height: 0;
  top: 50%;
}

.carousel-control-prev {
  height: 0;
  top: 50%;
}

.carousel-control-prev-icon {
  opacity: none;
}

.carousel-control-next-icon {
  opacity: 2;
}

#slide1 {
  background-color: black;
  background-image: url(/images/home1.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
}

#slide2 {
  background-color: black;
  background-image: url(/images/home2.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
}

#slide3 {
  background-color: black;
  background-image: url(/images/home3.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
}

.carousel-indicators {
  bottom: -10%;
  position: absolute;
}

#jumbo-btn {
  background-color: #e4381C;
  border-color: #e4381C;
}

<!-- Carousel -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div id="myslider" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#myslider" data-slide-to="0" class="active"></li>
    <li data-target="#myslider" data-slide-to="1"></li>
    <li data-target="#myslider" data-slide-to="2"></li>
  </ul>

  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div id="slide1" class="jumbotron">
        <div class="container">
          <div class="row">
            <div id="slide1-text" class=" col-md-6 col-sm-12">
              <h1>text</h1>
              <p>text</p>
              <a id="jumbo-btn" class="btn btn-primary btn-sm" href="about.html" role="button">Learn more</a>
            </div>
          </div>

        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div id="slide2" class="jumbotron">
        <div class="container">
          <div class="row">
            <div class=" col-md-6 col-sm-12">
              <h1>text</h1>
              <p>text</p>
              <a id="jumbo-btn" class="btn btn-primary btn-sm" href="#" role="button">View Stock</a>
            </div>
          </div>

        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div id="slide3" class="jumbotron">
        <div class="container">
          <div class="row">
            <div class=" col-md-6 col-sm-12">
              <h1>text</h1>
              <p>text</p>
              <a id="jumbo-btn" class="btn btn-primary btn-sm" href="about.html" role="button">Learn more</a>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
  <!-- The slideshow END -->

  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#myslider" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#myslider" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
  <!-- Left and right controls END -->

</div>
<!-- Carousel END -->

Upvotes: 3