I'm working on a website that has a two carousels for mobile screen sizes. It works perfectly fine on ALL devices except SOME iphones. I have no idea whats causing the issue and none of the devices where its happening are within a 300 mile radius of me, so I can't even debug it. Has anyone run into this issue or know a fix for it?
Again, its important to note that this is only happening on SOME iphones.
Here is a video of whats happening: https://youtu.be/8XGMKTpUUrI
Here is the html, css, and js code, respectively.
$("#mobileCarousel").carousel({
interval: 10000
})
$("#mobileCarousel").on("touchstart", function(event){
var xClick = event.originalEvent.touches[0].pageX;
$(this).one("touchmove", function(event){
var xMove = event.originalEvent.touches[0].pageX;
if( Math.floor(xClick - xMove) > 3 ){
$(this).carousel('next');
}
else if( Math.floor(xClick - xMove) < -3 ){
$(this).carousel('prev');
}
});
$(".carousel").on("touchend", function(){
$(this).off("touchmove");
});
});
$(".carousel carousel-item").each(function(){
var minPerSlide = 3;
var nextElement = $(this).next();
if(!nextElement.length){
nextElement = $(this).siblings(":first");
}
nextElement.children(':first-child').clone().appendTo($(this));
for (var i = 0; i < minPerSlide; i++) {
nextElement = nextElement.next();
if(!nextElement.length){
nextElement = $(this).siblings(":first");
}
nextElement.children(":first-child").clone().appendTo($(this));
}
});@media only screen and (max-width: 767px) {
.carousel-inner .carousel-item > div {
display: none;
}
.carousel-inner .carousel-item > div:first-child {
display: block;
}
} <div class="container-fluid carousel-container d-lg-none d-xl-none">
<div class="row">
<div id="mobileCarousel" class="carousel slide w-100" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="col-12 col-sm-8 col-md-6 offset-md-3 offset-sm-2">
<div class="card index-card border-success">
<div class="d-flex justify-content-center">
<img src="code icon.png" alt="">
</div>
<div class="d-flex justify-content-center">
<p class="pTagsForCardTitles"><HTML> and CSS3</p>
</div>
<div class="d-flex justify-content-center">
<p class="pTagsForCards d-flex justify-content-center">We design and program your website from scratch and to
your liking. No restrictive templates! Have the website you have always dreamt of for your business.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-12 col-sm-8 col-md-6 offset-md-3 offset-sm-2">
<div class="card index-card border-success">
<div class="d-flex justify-content-center">
<img src="shield icon.png" alt="">
</div>
<div class="d-flex justify-content-center">
<p class="pTagsForCardTitles">Online Security</p>
</div>
<p class="pTagsForCards d-flex justify-content-center">Tropiweb supplies SSL security certificates to every
page it produces. Keep your transactions and clients' sensitive informations out of the wrong hands.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-12 col-sm-8 col-md-6 offset-md-3 offset-sm-2">
<div class="card index-card border-success">
<div class="d-flex justify-content-center">
<img src="search icon.png" alt="">
</div>
<div class="d-flex justify-content-center">
<p class="pTagsForCardTitles">Search Engine Optimization</p>
</div>
<p class="pTagsForCards d-flex justify-content-center">We optimize your web-page's <meta>, <alt>, and
<title> tags in order to maximize the probability of potential clients finding you through any search engine</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-12 col-sm-8 col-md-6 offset-md-3 offset-sm-2">
<div class="card index-card border-success">
<div class="d-flex justify-content-center">
<img src="responsive icon.png" alt="">
</div>
<div class="d-flex justify-content-center">
<p class="pTagsForCardTitles">Sleek and Responsive</p>
</div>
<p class="pTagsForCards d-flex justify-content-center">Your website is designed with cross-platform compatability as a priority.
No matter the web-browser or device (tablet, laptop, or phone) your page will always function properly.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-12 col-sm-8 col-md-6 offset-md-3 offset-sm-2">
<div class="card index-card border-success">
<div class="d-flex justify-content-center">
<img src="money icon.png" alt="">
</div>
<div class="d-flex justify-content-center">
<p class="pTagsForCardTitles">E-Commerce Solutions</p>
</div>
<p class="pTagsForCards d-flex justify-content-center">Run your online shop right from your very own website. Validate transactions,
keep stock of your merchandise, charge applicable sales taxes, and ship your product with no hassle.</p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#mobileCarousel" role="button" data-slide="prev">
<span>
<img class="carousel-arrow-right" src="flecha-de.png" alt="">
</span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#mobileCarousel" role="button" data-slide="next">
<span>
<img class="carousel-arrow-left" src="flecha-iz.png" alt="">
</span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>So, after many sleepless nights and debugging the heck out of it, turns out that the problem was that I was using old versions of Bootstrap and jQuery lmao. As soon as I included the most recent versions of jQuery and Bootstrap the page started behaving exactly as expected in all versions of IOS.