GoogleChromeLabs / GoogleChromeLabs/ui-element-samples

Flings on infinite scroller demo get aborted in Firefox

Open
#60 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
4.1k
Forks
723
Avg merge
3m
Merged PRs (30d)
4

Description

In the infinite scroller demo, if you scroll down so as to load more content and then scroll upwards using a "fling" type of gesture (OS X trackpad, but probably using touch input as well on other platforms), the fling gets aborted and the scroll comes to an abrupt halt. This was filed as https://bugzilla.mozilla.org/show_bug.cgi?id=1280330 but is not considered a Gecko bug. What's happening is that the demo sets the scroller's scrollTop explicitly once the new content is loaded, and that will cause the fling animation to abort. In this case Chrome prioritizes the user's fling over the JS setting the scrollTop, so the demo works as intended in Chrome.

I made a reduced test case to isolate the problem, you can find it here:
https://gist.github.com/staktrace/08e1bea08d99c0288ba3fcbb4bd16050

In this test case, there is a big scrollable page, and 100ms after a wheel event the JS just sets the scrollTop to the current value + 1. In Firefox if you do a fling using the OS X trackpad, it will go for 100ms and then abruptly stop and scroll by 1 pixel at a time. In Chrome the same JS runs, but the fling isn't aborted. It's not clear to me which behaviour is more "correct" but it's certainly a difference between the two browsers that is tripped by this demo.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.