I am trying to implement scroll-snap on a page. I have added scroll-snap-type to the container element and scroll-snap-align to child sections. It works fine on Chrome on large screen, and on firefox on all screen sizes. However, it seems to skip sections on smaller screens on Chrome. So it would show child 1, 3, 5 and so on. Code below:
.hero-pages {
height: 100vh;
scroll-snap-type: y mandatory ;
overflow-y: scroll;
}
.hero-page {
height: 100vh;
background-image: none;
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;
background-size: cover;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
scroll-snap-align: center;
scroll-snap-stop: always;
position: relative;
}<div className="homepage">
<Navbar></Navbar>
<div className="hero-pages">
<HeroPage index={0}></HeroPage>
<HeroPage index={1}></HeroPage>
<HeroPage index={2}></HeroPage>
<HeroPage index={3}></HeroPage>
<HeroPage index={4}></HeroPage>
<HeroPage index={5}></HeroPage>
</div>
</div>Tried playing round with the css and changing values, but I am not sure what the issue is. Read through some posts on SO about a chrome bug causing the issue, and the solution was to add a wrapper container, which is what my code has anyway. I am using React to design the page.
Thank you.
Edit: Added gifs to help me explain the behaviour:
Correct behaviour - Large external screen - Chrome:
Wrong behaviour - Laptop screen 14" - Chrome:
