jquery - Owl Carousel 2 レスポンシブ幅の問題

Question

Owl Carousel 2スライダーでマイナーな (しかし非常に厄介な) 問題が発生しています。

基本的に、画像のサイズであるため、最大幅が 824px の単一項目のスライダーが必要です。それ以外の場合、スライダーは親の幅の 95% です。

.owl-carousel {
  display: none;
  max-width: 824px;
  width: 95%;
  height: auto;
  margin: 0 auto;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 1;
}

.owl-carousel .owl-stage {
  position: relative;
  -ms-touch-action: pan-Y;
}

.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;
  -webkit-transform: translate3d(0px, 0px, 0px);
}

.owl-carousel .owl-refresh .owl-item {
  display: none;
}

.owl-carousel .owl-item {
  position: relative;
  min-height: 1px;
  height: auto;
  float: left;
  width: 100%;
  -webkit-backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.owl-carousel .owl-item img {
  display: block;
  width: 100%;
  -webkit-transform-style: preserve-3d;
}

私の問題は、ビューポートのサイズが原因で、スライダーの親クラスがアイテムのサイズを 824 ピクセルの幅 (メイン コンテナーに対して以前に設定した最大幅) 未満に変更した場合、次のようになることです。

EDIT 1:クイック codepen を作成しました。問題を確認するには、通常どおりにページを表示し、手動でサイズを変更して (約 800 ピクセルの幅を試してください)、更新します。

ご覧のとおり、次のアイテムが右側に部分的に表示されています。アクティブなアイテムがコンテナーを 100% 満たす気がしなかったようです。奇妙なことに、これはページがこのビューポート幅でロードされた場合にのみ発生します。ブラウザ ウィンドウのサイズを手動で変更して問題を再現しようとすると、すべて問題なく動作し、意図したとおりに動作します。パディング（画像の境界線とアイテムのパディングを押して離す）で「修正」しようとすると、手動でウィンドウのサイズを変更すると、奇妙なことが起こります。つまり、オプションではありません。

任意のビューポート サイズで項目がスライダー幅を 100% 満たすようにするにはどうすればよいですか?

編集 2: jQuery スクリプトが断続的に動作する問題である可能性が非常に高いと誰かが示唆しました。私は書いていないjQueryを読むのが得意ではないので、それについてセカンドオピニオンを得ることができますか?