Bootstrap4 カルーセルのスライド時にレイアウトがずれる

Question

下記サイトのファーストビューにBootstrap4 のカルーセルでスライドを使用しているのですが
スマートフォンで見た時に下にスクロールしていくと、スライドされた時にレイアウトが上にずれてしまい
がたつく感じの現象が起きています。

<div class="container-fluid main_img_bg sp" style="background-image:url(); background-size: cover; padding:0; overflow: hidden;">
<div id="carouselExampleIndicators" class="carousel slide pointer-event" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item">
          
      <img src="http://lacynthia.hp-kari.com/wp-content/uploads/head_sp1.jpg" class="d-block img-fluid lazyloaded" alt="TOP画像" data-ll-status="loaded"><noscript><img src="http://lacynthia.hp-kari.com/wp-content/uploads/head_sp1.jpg" class="d-block img-fluid" alt="TOP画像"></noscript>
    </div>
    <div class="carousel-item active">
		
      <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" class="d-block img-fluid" alt="" data-lazy-src="http://lacynthia.hp-kari.com/wp-content/uploads/head_sp2-1.jpg"><noscript><img src="http://lacynthia.hp-kari.com/wp-content/uploads/head_sp2-1.jpg" class="d-block img-fluid" alt=""></noscript>
    </div>
    <div class="carousel-item">
		
      <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" class="d-block img-fluid" alt="" data-lazy-src="http://lacynthia.hp-kari.com/wp-content/uploads/head_sp3-1.jpg"><noscript><img src="http://lacynthia.hp-kari.com/wp-content/uploads/head_sp3-1.jpg" class="d-block img-fluid" alt=""></noscript>
    </div>
    
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>

.carousel-itemのfloat:left;が干渉しているのか分からないのですが
何か原因が分かればご教示ください。

・問題サイト
http://lacynthia.hp-kari.com/

Comments

[Lhankor_Mhy]

ご提示のサイトを拝見しましたが、2周目はがたつきがないようでした。

[yuiku]

ありがとうございます。

私のスマートフォンでは
ファーストビューより下のコンテンツにスクロールしていくと
がたつきが止まらないのですが、上にスクロールして戻っていくと止まります。

がたつきの原因がある可能性の要素は何か分かりますでしょうか？

Answer 1

当方で確認したところ、スライダーが2周目に入るとがたつきがないようでした。
画像の読み込みでがたつきがあるのではないかと思いました。
試しに、PCのDevtoolsで帯域制限をしてみたところ、画像が読み込まれるまでレイアウトが上にずれましたので、おそらくこれが原因かと思います。

解決方法ですが。
ソースを見るとdata-lazy-srcという属性があったので、おそらく Lazy Load 系のプラグインを入れていると思います。
これを停止すると解消されるかもしれません。
または、カルーセルの高さが変動してしまうのが原因ですので、固定高さを与えればいいのかもしれないです。

Comments

[yuiku]

ご丁寧にありがとうございます！解決いたしました！

[Lhankor_Mhy]

お役に立てたようで何よりです