Scroll event listener fires after changing styles of scrollable content
Reported by
sg.ro...@gmail.com,
Apr 3 2018
|
||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36 Steps to reproduce the problem: 1. Place the cursor inside the .viewport 2. Make two-finger swipe up on a trackpad (like "Scroll" gesture https://support.apple.com/en-us/HT204895) which should fire scroll down event 3. Wait a little 4. Touch the trackpad with two fingers What is the expected behavior? 3. Inertial scroll is slowing down 4. Inertial scroll is interrupted What went wrong? 3. Inertial scroll is not slowing down 4. There is no reaction, scrolling is going on (see the attached video) Did this work before? N/A Does this work in other browsers? Yes Chrome version: 65.0.3325.181 Channel: stable OS Version: OS X 10.13.4 Flash Version:
,
Apr 4 2018
,
Apr 4 2018
Able to reproduce the issue on Mac 10.13.3 using chrome reported version #65.0.3325.181 and latest canary #67.0.3387.0. This is a non-regression issue as it is observed from M60 old builds. Hence, marking it as untriaged to get more inputs from dev team. Thanks...!!
,
Apr 5 2018
I was able to reproduce the issue, for now I'll take a look to see why tapping on trackpad doesn't stop inertial scrolling.
,
Sep 21
I have run into a similar issue independently. (Albeit with much more complicated code so it it is great to have a simple reproducible example – thanks!)
I noticed that scrolling by dragging the scrollbar works as expected – scroll events fire only while scrolling. On macOS it’s easier to do this if you change System Preferences > General > Show scroll bars to “Always”.
However, if I use the mouse wheel (or trackpad), the scroll events will fire continuously. In my case, I’m fairly certain that modifying the viewport contents during the scroll event handler triggers a subsequent scroll event, which of course results in another call to the handler, more modifications to the viewport contents, and ultimately yet another scroll event. That is, modifying the viewport contents in the scroll handler results in scroll event feedback.
Both Firefox (61.0.2) and Safari (12.0 (12606.2.11)) work as expected. Scrolling via the mouse wheel triggers the event handler and the event handler modifies the viewport contents. No further scroll events fire until the user physically scrolls again.
I can mitigate the scroll event feedback by modifying `inertial-scroll.html` to debounce the scroll event like so:
```
let timerId
viewport.addEventListener('scroll', () => {
clearTimeout(timerId)
timerId = setTimeout(() => {
buffer.style.height = `${viewport.scrollTop}px`;
}, 150)
}, true);
```
However, the same debouncing does _not_ prevent scroll event feedback with my more complicated case.
|
||||
►
Sign in to add a comment |
||||
Comment 1 by krajshree@chromium.org
, Apr 3 2018