猫头鹰旋转木马在滑动箭头后变坏

Question

我使用猫头鹰轮播来滚动轮播（v2.4）。

使用箭头滑动时，滑动项会变差。有时会错误地仅在移动设备上呈现图像或文本，iv'e在iPhone上的Safari和三星Galaxy Note 8上的Google Chrome上均重现了错误，在桌面上它始终可以按预期运行

css：

    .owl-carousel, .owl-carousel .owl-item{-webkit-tap-highlight-color:transparent; position:relative}
.owl-carousel{margin:auto;width:100%!important;display:none;  z-index:1}
.owl-carousel .owl-stage:after{content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0}
.owl-carousel .owl-stage-outer{position:relative; overflow:hidden;}
.owl-carousel .owl-stage-outer:after{ content: ""; position:absolute; left: 0; top: 0; width: 2px; height: 54px; background: #fff;}
.owl-carousel .owl-dots.disabled, .owl-carousel .owl-nav.disabled{display:none}
.no-js .owl-carousel, .owl-carousel.owl-loaded{display:block}
.owl-carousel .owl-dot, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-nav .owl-prev{cursor:pointer; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none}
.owl-carousel.owl-loading{opacity:0; display:block}
.owl-carousel.owl-hidden{opacity:0}
.owl-carousel.owl-refresh .owl-item{visibility:hidden;}
.owl-carousel.owl-rtl{direction:rtl}
.owl-carousel.owl-rtl .owl-item{float:right; }
.owl-next, .owl-prev{background-position:0 0}
.owl-carousel{position:relative; z-index:1; height:100%; width:100%}
.owl-nav{text-align:center; margin-top:20px;}
.owl-next, .owl-prev{background-color:transparent; border-radius:0; height:40px; width:15px; text-align:center; line-height:40px; font-size:30px; -webkit-transition:0.4s; -moz-transition:0.4s; -o-transition:0.4s; transition:0.4s; color:#000; display:inline-block; margin:0 5px; position:absolute; top:50%; margin-top:-20px;}
.owl-next:hover, .owl-prev:hover{ background-color:transparent}
.owl-dots{ display:none;}
.new_slider a{ text-decoration:none;}
.new_slider .owl-next{ background:#f5f5f5 url(/images/leftarrow.png) no-repeat  center center ; height: 76px; width: 40px; background-size: 20px 20px; position:absolute; left: 0; right: auto; top: -15px; bottom: 0; margin-top: 0;margin:0; }
.new_slider .owl-prev{ background: #f5f5f5 url(/images/rightarrow.png)no-repeat  center center; height: 76px; width: 40px; background-size:  20px 20px; position:absolute; right: 0; left: auto; top: -15px; bottom: 0;  margin-top: 0;margin:0;}
.new_slider .owl-next i, .new_slider .owl-prev i{ display:none;}
.new_slider .item span{ display: block; line-height: 16px;}
.new_slider .owl-item, .new_slider .owl-item.active, .owl-item.center {filter: gray;-webkit-filter: grayscale(1);-webkit-filter: grayscale(100%);filter: url(resources.svg#desaturate);    filter: grayscale(100%);}
.new_slider .owl-item, .new_slider .owl-item.active.center{ filter: gray;   -webkit-filter: grayscale(1);   -webkit-filter: grayscale(100%);filter: url(resources.svg#desaturate);   filter: grayscale(100%);}
.new_slider .owl-item. img{ filter: gray;    -webkit-filter: grayscale(1);   -webkit-filter: grayscale(100%);filter: url(resources.svg#desaturate);    filter: grayscale(100%);}
.new_slider .owl-prev.disabled,.new_slider .owl-next.disabled {-webkit-filter: grayscale(100%);filter: grayscale(100%);opacity: 0.2;}

javascript：

  var owl3 = $('.CarouselOwl4');
  owl3.owlCarousel && owl3.owlCarousel({
    margin: -32,
      rtl: true,
      nav: true,
      loop: false,
      autoplay: false,
    mouseDrag: false,
    touchDrag: false,
    pullDrag: false,
      responsive: {
          0: { items: 3 },
          480: { items: 3 },
          544: { items: 3 },
          768: { items: 4 },
          992: { items: 6 },
          1200: { items: 6 }
      }
  })

这就是向右或向左滚动几下后的样子：