GoogleChromeLabs / ui-element-samples

A collection of prototyped UI elements
https://googlechromelabs.github.io/ui-element-samples
Apache License 2.0
4.12k stars 745 forks source link

Flings on infinite scroller demo get aborted in Firefox #60

Open staktrace opened 7 years ago

staktrace commented 7 years ago

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.

wanderview commented 7 years ago

Does chrome update the position, but maintain the current momentum or velocity of the fling?

surma commented 7 years ago

/cc @flackr @ianvollick @rbyers