1201231 - (apz-parallax) [meta] Parallax effect issues with APZ

Status: NEW

(Core :: Panning and Zooming, defect, P3)

Description

[Botond Ballo [:botond]]

Pages that use JS to achieve a parallax or similar effects often look jumpy with APZ scrolling, because APZ can scroll the page without giving JS handlers a chance to update properties in accordance with the scroll.

We mitigated this in bug 1150282 by repainting more often, to reduce the period of time between invocations of such JS handlers.

However, some pages still look bad (see bug 1197654, bug 1193969). I think we should figure out a story for pages like this before shipping APZ.

Specifically:

  - We should investigate if there are any other platform-side fixes
    that we can employ to mitigate the issue.

  - If our story is "use CSS instead of JS handlers to achieve a 
    parallax effect", make sure that's working properly (currently
    it suffers from bug 1168263) and there's some guide/documentation
    that we can point web developers to.

Comment 1

[Markus Stange [:mstange]]

I've filed bug 1201336 about making background-position updates cheaper to repaint. This will help parallax effects if the page is otherwise responsive.

Comment 2

[Kartikaya Gupta (email:[e-mail])]

So now that bug 1168263 has landed it appears we have a decent solution for parallax scrolling with APZ. In particular, scrolling around on http://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/ is janky without matt's patches from bug 1168263, and it's smooth with matt's patches. This is particularly noticeable if you check the debug toggle in the top-left of the page. I tested using the Nov26 nightly which doesn't have the patches, and compared it to the inbound build when the patches landed. Tested on OS X.

Matt, is there any further work you think is needed with respect to perspective stuff and APZ? If not I'm thinking of writing a blog post explaining the problem and recommending that people use perspective to implement parallax scrolling rather than scroll events and JS where possible.

Comment 3

[Matt Woodrow (:mattwoodrow)]

Nope, I'm all finished there (modulo any regressions).

A blog post sounds great!

Comment 4

[Kartikaya Gupta (email:[e-mail])]

Blog post is at https://staktrace.com/spout/entry.php?id=834; I made it more generally about APZ and scroll-linked effects, but also mentioned parallax.

Comment 5

[Botond Ballo [:botond]]

(In reply to Kartikaya Gupta (email:[e-mail]) from comment #4)
> Blog post is at https://staktrace.com/spout/entry.php?id=834; I made it more
> generally about APZ and scroll-linked effects, but also mentioned parallax.

Note that, as Markus discovered earlier, this use of perspective to achieve parallax has the notable problem that it requires the scrollable element to be a subframe rather than the root scroll frame.

This is problematic for two reasons:

  - Safari Desktop only async-scrolls the root scroll frame
  - Safari Mobile in its default configuration only touch-scrolls the root scroll frame

As a result, we expect web authors will be reluctant to make the main scrollable element of their page a subframe just to have a parallax effect.

Comment 6

[Botond Ballo [:botond]]

Rather, prospective approaches to an APZ-friendly parallax effect include:

  - Scroll-driven animations (https://birtles.github.io/scroll-animations/)

  - Animation worklets (https://discourse.wicg.io/t/proposal-animationworklet-a-primitive-for-scroll-linked-and-high-performance-procedural-animated-effects/1710)

Both of these proposals are in currently in the spec-development stage, and neither is implemented yet in Firefox (though I have a prototype of scroll-driven animations here: https://theres-waldo.github.io/scroll-driven-animations/).

Comment 7

[Botond Ballo [:botond]]

(In reply to Botond Ballo [:botond] from comment #6)
>   - Scroll-driven animations (https://birtles.github.io/scroll-animations/)

I'm currently trying to get a prototype of scroll-driven animations to achieve a smooth parallax effect, and discovered that we would need bug 1100357 fixed to enable that, so marking that as a dependency.