title: How to fix Bootstrap Carousel flicker/flash/blink on Iphones when it transitions to the next item? (Video example included)
body: <p>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?</p>
  <p>Again, its important to note that this is only happening on SOME iphones.</p>
  <p>Here is a video of whats happening:
  <a href="https://youtu.be/8XGMKTpUUrI" rel="nofollow noreferrer">https://youtu.be/8XGMKTpUUrI</a></p>
  <p>Here is the html, css, and js code, respectively.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#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) &gt; 3 ){
              $(this).carousel('next');
          }
          else if( Math.floor(xClick - xMove) &lt; -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 &lt; minPerSlide; i++) {
      nextElement = nextElement.next();
      if(!nextElement.length){
        nextElement = $(this).siblings(":first");
      }
      nextElement.children(":first-child").clone().appendTo($(this));
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@media only screen and (max-width: 767px) {
    .carousel-inner .carousel-item &gt; div {
      display: none;
    }
    .carousel-inner .carousel-item &gt; div:first-child {
      display: block;
  
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;div class="container-fluid carousel-container d-lg-none d-xl-none"&gt;
      &lt;div class="row"&gt;
        &lt;div id="mobileCarousel" class="carousel slide w-100" data-ride="carousel"&gt;
          &lt;div class="carousel-inner" role="listbox"&gt;
            &lt;div class="carousel-item active"&gt;
              &lt;div class="col-12 col-sm-8 col-md-6 offset-md-3 offset-sm-2"&gt;
                &lt;div class="card index-card border-success"&gt;
                  &lt;div class="d-flex justify-content-center"&gt;
                    &lt;img src="code icon.png" alt=""&gt;
                  &lt;/div&gt;
                  &lt;div class="d-flex justify-content-center"&gt;
                    &lt;p class="pTagsForCardTitles"&gt;&amp;ltHTML&amp;gt and CSS3&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="d-flex justify-content-center"&gt;
                    &lt;p class="pTagsForCards d-flex justify-content-center"&gt;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.&lt;/p&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="carousel-item"&gt;
              &lt;div class="col-12 col-sm-8 col-md-6 offset-md-3 offset-sm-2"&gt;
                &lt;div class="card index-card border-success"&gt;
                  &lt;div class="d-flex justify-content-center"&gt;
                    &lt;img src="shield icon.png" alt=""&gt;
                  &lt;/div&gt;
                  &lt;div class="d-flex justify-content-center"&gt;
                    &lt;p class="pTagsForCardTitles"&gt;Online Security&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;p class="pTagsForCards d-flex justify-content-center"&gt;Tropiweb supplies SSL security certificates to every
                  page it produces. Keep your transactions and clients' sensitive informations out of the wrong hands.&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="carousel-item"&gt;
              &lt;div class="col-12 col-sm-8 col-md-6 offset-md-3 offset-sm-2"&gt;
                &lt;div class="card index-card border-success"&gt;
                  &lt;div class="d-flex justify-content-center"&gt;
                    &lt;img src="search icon.png" alt=""&gt;
                  &lt;/div&gt;
                  &lt;div class="d-flex justify-content-center"&gt;
                    &lt;p class="pTagsForCardTitles"&gt;Search Engine Optimization&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;p class="pTagsForCards d-flex justify-content-center"&gt;We optimize your web-page's &amp;ltmeta&amp;gt, &amp;ltalt&amp;gt, and
                    &amp;lttitle&amp;gt tags in order to maximize the probability of potential clients finding you through any search engine&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="carousel-item"&gt;
              &lt;div class="col-12 col-sm-8 col-md-6 offset-md-3 offset-sm-2"&gt;
                &lt;div class="card index-card border-success"&gt;
                  &lt;div class="d-flex justify-content-center"&gt;
                    &lt;img src="responsive icon.png" alt=""&gt;
                  &lt;/div&gt;
                  &lt;div class="d-flex justify-content-center"&gt;
                    &lt;p class="pTagsForCardTitles"&gt;Sleek and Responsive&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;p class="pTagsForCards d-flex justify-content-center"&gt;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.&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="carousel-item"&gt;
              &lt;div class="col-12 col-sm-8 col-md-6 offset-md-3 offset-sm-2"&gt;
                &lt;div class="card index-card border-success"&gt;
                  &lt;div class="d-flex justify-content-center"&gt;
                    &lt;img src="money icon.png" alt=""&gt;
                  &lt;/div&gt;
                  &lt;div class="d-flex justify-content-center"&gt;
                    &lt;p class="pTagsForCardTitles"&gt;E-Commerce Solutions&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;p class="pTagsForCards d-flex justify-content-center"&gt;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.&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;a class="carousel-control-prev" href="#mobileCarousel" role="button" data-slide="prev"&gt;
              &lt;span&gt;
                &lt;img class="carousel-arrow-right" src="flecha-de.png" alt=""&gt;
              &lt;/span&gt;
              &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
            &lt;/a&gt;
            &lt;a class="carousel-control-next" href="#mobileCarousel" role="button" data-slide="next"&gt;
              &lt;span&gt;
                &lt;img class="carousel-arrow-left" src="flecha-iz.png" alt=""&gt;
              &lt;/span&gt;
              &lt;span class="sr-only"&gt;Next&lt;/span&gt;
            &lt;/a&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>