Describing this issue without visual reference is challenging, so I've provided a link to the website for you to see it firsthand.
The Bootstrap image slide on my desktop operates flawlessly, but on my iPhone X, each slide appears to transition twice or bounce during transitions.
Interestingly, this problem does not occur when viewing it on an iPhone 7 - where it functions perfectly.
This puzzling behavior has stumped me, and despite researching extensively, I haven't found any similar reports of this issue...
It seems like a specific iPhone problem, and the fact that it works on the iPhone 7 but not the iPhone X might hold the key to solving 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 -->