css - トランジション中にアイテム間の空白を削除する

Question

Owl Carousel を使用してスライドショーを作成しています。

すべてのカルーセル アイテムに同じ背景色を使用すると、アイテム間の遷移中に空白が表示されます。

この問題は、Chrome ブラウザを使用している場合にのみ発生します。

問題が発生している例を参照してください: jsfiddle.net/7yd04b1p/7

Owl Carousel は CSS3 translate3d を使用してスライドのトランジションを行っていることがわかりました。Chrome はこれを別の方法でレンダリングしていると思います。

doTranslate: function(pixels) {
  return {
    "-webkit-transform": "translate3d(" + pixels + "px, 0px, 0px)",
    "-moz-transform": "translate3d(" + pixels + "px, 0px, 0px)",
    "-o-transform": "translate3d(" + pixels + "px, 0px, 0px)",
    "-ms-transform": "translate3d(" + pixels + "px, 0px, 0px)",
    "transform": "translate3d(" + pixels + "px, 0px,0px)"
  };
},

誰でもそれを解決する方法を知っていますか?

ありがとう！

Answer 1

これをJSコードに追加します

$(document).ready(function() {
  $("#owl-demo").owlCarousel({
    autoPlay: 3000,
    navigation: true,
    slideSpeed: 300,
    paginationSpeed: 400,
    singleItem: true
  });
  // Add this code
  var widthItem = $(".owl-item").width();
  $(".owl-item .item").css("width", widthItem +1)
});

Answer 2

これを追加

.owl-wrapper {
  background: #000;
}

https://jsfiddle.net/breezy/Lrrebcjw/