如何修复 Iphone 上的 Bootstrap Carousel flicker/flash/blink 过渡到下一个项目？（包括视频示例）

Question

我正在开发一个网站，该网站有两个适用于移动屏幕尺寸的轮播。它在除某些 iPhone 之外的所有设备上都运行良好。我不知道是什么导致了这个问题，而且 none 发生问题的设备都在我 300 英里半径范围内，所以我什至无法调试它。有人运行了解这个问题或知道解决方法吗？

再次强调，这只发生在某些 iPhone 上。

这是一段视频，展示了正在发生的事情： https://youtu.be/8XGMKTpUUrI

这里分别是html、css和js代码

$("#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

很确定这是由于您在之前没有 .row class 的容器中使用列 <div class="col-12 col-sm-8 col-md-6 offset-md-3 offset-sm-2"> 造成的。您在容器之后使用 row class，在最顶部，它弄乱了所有轮播项目。

我做了一支笔，https://codepen.io/amarinediary/pen/pogedyj。它应该是您要查找的内容，我刚刚删除了行 class 和列。 gl.

Answer 2

我制作了您网站的镜像副本http://tropiweb.net/。我编辑了你的 <div id="mobileCarousel"> 这是代码笔：https://codepen.io/amarinediary/pen/pogedwy 这应该有效（未测试）。如果您有任何其他问题，请随时回来找我。 gl.

Answer 3

所以，经过无数个不眠之夜和调试之后，问题出在我使用的是旧版本的 Bootstrap 和 jQuery lmao。一旦我包含了 jQuery 和 Bootstrap 的最新版本，该页面就开始在 IOS.

的所有版本中完全按照预期运行。

如何修复 Iphone 上的 Bootstrap Carousel flicker/flash/blink 过渡到下一个项目？（包括视频示例）

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

html

iphone

jquery

flicker

carousel

如何修复 Iphone 上的 Bootstrap Carousel flicker/flash/blink 过渡到下一个项目？ （包括视频示例）

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

html

iphone

jquery

flicker

carousel

如何修复 Iphone 上的 Bootstrap Carousel flicker/flash/blink 过渡到下一个项目？（包括视频示例）