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:
- open chrome (occurs in version 121) devtools with mobile emulation
- swipe carousel
- 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.
Is this problem only in chrome? Only in devtools? Can it influence real users?
