CSS scroll snap choppy/laggy on Chrome desktop

Question

I've been building this page using scroll-snap and it's working well on Firefox desktop & mobile, as well as Chrome mobile.

But on Chrome desktop (Edge desktop as well) I get very choppy/laggy scroll animation, to the point I don't consider it usable as it is.

I've been looking for a few hours now, to no avail. Any help or lead or idea would be greatly appreciated.

I'm on Windows 10.

---

Here's the SCSS for the snap container and items:

.works {
   margin: 0;
   padding: 0;
   scroll-snap-type: y mandatory;
   scroll-behavior: smooth;
          
   overflow: scroll;
   height: calc(100vh - var(--header-height) - 2vh);
   width: 100vw;
       
   position: absolute;
   top: calc(var(--header-height) + 2vh);
        
   > div {
     margin: 0 auto;
     padding: 2vh 0 0;     
     display: block;
     width: clamp(200px, 100vw, 1280px);
     min-height: 100%;
     z-index: -1; 
       
     background-origin: border-box;
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: center;
     background-size: auto 100%;
       
     border-radius: .5em;
     border: none;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
      
     display: grid;
     grid-template-rows: auto 7rem auto;
       
     scroll-snap-align: start;
     scroll-snap-stop: always;    
  }
}

And the matching React component:

    function Works() {
    
      const contents = worksContents.map( ({ title, year, text, pic }, i)  => {
    
        const styles = {
          backgroundImage: `linear-gradient(transparent, #fdfdfd 75%), url(${pic})`,
        }
    
    
        return (
         
         <div key={ i } style={ styles }> 
    
            <span className='title'> { title } </span>
      
            <span className='year'> { year } </span>
        
            { text }
            
         </div> )
    
        }
    
      )
      
    
      return (
    
          <section className="works">
            {  contents  }
          </section>
    
      )

}

export default Works

Answer 1

I just wanted to second this question as its affecting me too. Scroll-Snap seems to be completely unusable in desktop chrome at the moment.

I made a codepen to demonstrate the problem: https://codepen.io/lumakker/pen/poaybJd

html:

<div class="testdiv" style="background-color:white">
  <p>compare between scrolling with mousewheel and scrolling with autoscroll (middle mouse button click). Mousewheell scroll-snap is very choppy on chrome desktop.</p>
</div>
<div class="testdiv" style="background-color:black"></div>
<div class="testdiv" style="background-color:green"></div>
<div class="testdiv" style="background-color:red"></div>

css:

html {
  scroll-snap-type: y mandatory;
  height: 100%
}
body {
  height: 100%
}
.testdiv {
  height: 100%;
  scroll-snap-align: start;
}

I hope someone has a solution because I would really like to avoid using a custom scroll-snap js for my website.