How to fix Bootstrap Carousel flicker/flash/blink on Iphones when it transitions to the next item? (Video example included)

Question

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">&ltHTML&gt 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 &ltmeta&gt, &ltalt&gt, and
                  &lttitle&gt 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>

Answer 1

Pretty sure this is caused by your use of columns <div class="col-12 col-sm-8 col-md-6 offset-md-3 offset-sm-2"> inside a container that has no .row class right before. You're using the row class just after the container, at the very top which is messing up all the carousel items.

Answer 2

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.

Answer 3

i've made a mirror copy of your website http://tropiweb.net/. I've edited your <div id="mobileCarousel"> Here is a codepen: https://codepen.io/amarinediary/pen/pogedwy This should be working (not tested). don't hesitate to come back to me if you have any other problem. gl.