There's an intriguing issue I'm encountering on my webpage with the bootstrap carousel wrapped inside a wrapper set as position:absolute. When the page is slightly scrolled down and the next carousel-item has a different height, the page abruptly "jumps".
The home-hero-wrapper is set at 100vh, and the carousel-home-wrapper, which wraps the carousel, is positioned absolutely at the bottom. Regardless of the size of the carousel-item, it should align at the bottom of the home-hero-wrapper.
The Issue:
Everything works smoothly until the page is scrolled down a bit (with the carousel still in the viewport) and during the carousel transition, the page unpredictably "jumps". Despite home-hero-wrapper maintaining its size, I can't determine why the sections are acting this way.
What could be missing here? Any suggestions?
Below is the code snippet replicating the problem:
.home-hero-wrapper {
height: 100vh;
min-height: 200px;
position: relative;
}
.carousel-home-wrapper {
position: absolute;
bottom: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="home-hero-wrapper bg-info">
<div class="hero-image" style="background-image: url(https://via.placeholder.com/1024x800);">
</div>
<div class="carousel-home-wrapper">
<div
id="carousel_home"
class="carousel slide carousel-fade"
data-ride="carousel"
data-interval="1000"
>
<div class="carousel-inner">
<div class="carousel-item bg-light active">
<h2>Content Shorter</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
</div>
<div class="carousel-item p-3 bg-light">
<h2>Content Longer</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem rem earum temporibus perferendis corrupti minus harum, ex ipsam molestiae iste dicta voluptatum mollitia quia animi ut, soluta molestias natus ipsa.</p>
</div>
</div>
</div><!-- #carousel_home -->
</div><!-- .carousel-home-wrapper -->
</div><!-- home-hero-wrapper -->
<div class="p-5 bg-warning">
<h2>Scroll until here</h2>
<h3>Make sure carousel still visible</h3>
<p>Waiting until carousel transition... All sections will "jump"</p>
</div>
<div class="p-5">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem rem earum temporibus perferendis corrupti minus harum, ex ipsam molestiae iste dicta voluptatum mollitia quia animi ut, soluta molestias natus ipsa.
</div>
<div class="p-5">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem rem earum temporibus perferendis corrupti minus harum, ex ipsam molestiae iste dicta voluptatum mollitia quia animi ut, soluta molestias natus ipsa.
</div>
<div class="p-5 bg-danger">
<h2>Make sure carousel still visible</h2>
</div>