I have a simple scroll snapping code below which works perfectly in Firefox 80.0.1 where as in Google Chrome v85.0.4183.102 he scrolling behavior isn't smooth and there is a delay in the snapping effect. Here is a link to a screen recording in Firefox and Google Chrome. From what I know scroll snapping should be supported in the major browsers as from caniuse.
Here are my code snippets
<body>
<section>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni cumque ut veritatis accusantium exercitationem, accusamus dolores eveniet. Adipisci hic soluta reiciendis nihil accusantium quam facilis. Animi earum culpa voluptate magni.</section>
<section>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni cumque ut veritatis accusantium exercitationem, accusamus dolores eveniet. Adipisci hic soluta reiciendis nihil accusantium quam facilis. Animi earum culpa voluptate magni.</section>
<section>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni cumque ut veritatis accusantium exercitationem, accusamus dolores eveniet. Adipisci hic soluta reiciendis nihil accusantium quam facilis. Animi earum culpa voluptate magni.</section>
</body>
html{
margin: 0;
padding: 0;
overflow-x: hidden;
scroll-snap-type: y mandatory;
overflow-y: scroll;
scroll-behavior: smooth;
}
body{
scroll-behavior: smooth;
}
section{
width: 100vw;
height: 100vh;
scroll-snap-align: start;
}
Here is a workable demo.
https://jsfiddle.net/cb5nraxq/
Is this a known bug on Google Chrome or did I set something wrong? I'm on Windows BTW
EDIT The issue only occurs when scrolling use mousewheel