el 0
el 1
el 2
el 3




.carousel { sc" />
el 0
el 1
el 2
el 3




.carousel { sc" />
el 0
el 1
el 2
el 3




.carousel { sc"/>

Using scroll-snap-type: x mandatory; in chrome can breaks scroll

65 Views Asked by At

I have markup

<div class="carousel">
  <div>el 0</div>
  <div>el 1</div>
  <div>el 2</div>
  <div>el 3</div>
</div>

<br />
<br />
<br />
<br />
.carousel {
  scroll-snap-type: x mandatory;
  overflow: auto;
  display: flex;
}

.carousel > * {
  scroll-snap-align: start;
  flex-shrink: 0;

  width: 300px;
  height: 200px;
  background-color: aquamarine;
}

Codepen: https://codepen.io/michaljanaszek/pen/BabeaKW

When I inspect this code in chrome devtools with mobile I can break ability to scroll page.

Steps to reproduce:

  1. open chrome (occurs in version 121) devtools with mobile emulation
  2. swipe carousel
  3. during animation of carousel point mouse below carousel and immediately try to scroll down with mouse wheel

Efect: mouse wheel scroll stops working, I'm able only to scroll vertically page by dragging page (like on mobile). This error stays in browser even when I refresh page (not visible in codepen, only when you recreate this code for example in single index.html). To go away I have to close tab and open new.

Video with this problem, at first I scroll page by mouse scroll wheel. After swiping carousel I'm unable.

gif showing this problem

Is this problem only in chrome? Only in devtools? Can it influence real users?

0

There are 0 best solutions below