avada Reporter
	Description • 7 years ago

I experience this weird backwards scrolling on this website.
I think scrolling is supposed to happen unevenly for the columns. At least that's what happens on a chromium based browser and when I set layers.async-pan-zoom.enabled to false. (Reproduced it on a new profile)

So it seems it's APZ related. I tried it on beta and nightly.

I attached a video of the issue.

	Botond Ballo [:botond]
	Comment 1 • 7 years ago

The page is using a "scroll" event handler to scroll the columns at different rates (presumably in an attempt to keep the times lined up horizontally).

The thing is, the page allows the browser to scroll the content by the default amount, and then "fixes up" the scroll offset in the scroll event handler.

With async scrolling, where the browser's scrolling can be rendered to screen before the effects of a "scroll" event handler, this results in the observed effect of first scrolling forward in the given direction (the browser's scrolling), and then backwards by some amount (the scroll event handler's "fixup").

The page author could achieve a better scrolling experience if they didn't allow the browser to scroll the content at all, and instead did all of the scrolling in the event handler. One way to do this would be the way Google Sheets does it, by having a "dummy" scrollable element that doesn't actually contain any content (to get the browser to create a scrollbar and fire "scroll" events), and the move the actual content from the scroll event handler. The resulting scrolling wouldn't be async, but at least it wouldn't have the backwards/forwards artifact we are currently seeing.

In the longer term, page authors will be able to use scroll-linked animations [1] to implement effects like this in a way that's compatible with async scrolling.

[1] https://wicg.github.io/scroll-animations/

	Botond Ballo [:botond]
	Comment 2 • 7 years ago

(In reply to Botond Ballo [:botond] from comment #1)
> The page author could achieve a better scrolling experience if they didn't
> allow the browser to scroll the content at all, and instead did all of the
> scrolling in the event handler. One way to do this would be the way Google
> Sheets does it, by having a "dummy" scrollable element that doesn't actually
> contain any content (to get the browser to create a scrollbar and fire
> "scroll" events), and the move the actual content from the scroll event
> handler. The resulting scrolling wouldn't be async, but at least it wouldn't
> have the backwards/forwards artifact we are currently seeing.

Moving the bug to Tech Evangelism on this basis.

	Botond Ballo [:botond]
	Comment 3 • 7 years ago

Note that this is not specific to autoscrolling - all APZ scrolling methods (e.g. mouse wheel) are affected.