Potential Bug In Google Chrome Scroll Snapping

Viewed 257

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

0 Answers
Related