I've encountered a problem on every browser other than firefox on macos and android (havent tested windows and ios) where the scroll snapping is delayed. On Firefox it works beautifully, but on Edge, Chrome and Safari it's delayed. Is there any fix for this?
My code:
.scroll-snap-container {
height: 100vh;
scroll-snap-type: mandatory;
scroll-snap-points-y: repeat(100vh);
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
overflow-scrolling: touch; /* Needed to work on iOS Safari */
overflow: auto;
}
.scroll-snap-container > div {
height: 100vh;
scroll-snap-align: start;
scroll-snap-stop: always;
position: relative;
}
p {
background-color: #000a;
color: white;
position: absolute;
}
img {
height: 100vh;
scroll-snap-align: start;
scroll-snap-stop: always;
}<div class="scroll-snap-container">
<div>
<p>Long text here.</p>
<img src="https://placeimg.com/640/480/any/sepia"/>
</div>
<div>
<p>Long text here.</p>
<img src="https://placeimg.com/641/480/any/sepia"/>
</div>
<div>
<p>Long text here.</p>
<img src="https://placeimg.com/642/480/any/sepia"/>
</div>
</div>EDIT: Added html snippet