1947353 - Incorrect rendering of scroll-driven animations on https://scroll-driven-animations.style

Status: NEW

(Core :: CSS Transitions and Animations, defect)

Description

[Nazım Can Altınova [:canova]]

I was looking at this website that was on the hacker news today: https://scroll-driven-animations.style/ . And specifically its demos section here: https://scroll-driven-animations.style/#demos

I noticed that it was rendered incorrectly on Nightly. Checked Chrome and Firefox release versions and they were correct. Then I run a mozregression which gave me this pushlog:

INFO: Last good revision: f17928eb61bc45047cfa4d4d20346b8edd369e0d
INFO: First bad revision: 0220f4ba63687de9a58b89b71eec01d7f8c621bd
INFO: Pushlog:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=f17928eb61bc45047cfa4d4d20346b8edd369e0d&tochange=0220f4ba63687de9a58b89b71eec01d7f8c621bd

It appears that it's started to render incorrectly after bug 1817303.

STR:

• Navigate to https://scroll-driven-animations.style/#demos.
• Scroll down
• Notice that they never become fully visible.

If you check it on other browsers, you can see that they become fully visible about the halfway through the viewport.

So while here, looks like they have lots of demos that you might be interested. Although I have to admit that I haven't checked them :)

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1817303

:boris, since you are the author of the regressor, bug 1817303, could you take a look?

For more information, please visit BugBot documentation.

Comment 2

[Donal Meehan [:dmeehan]]

layout.css.scroll-driven-animations.enabled is nightly only, setting Fx136 as disabled

Comment 3

[Sebastian Zartner [:sebo]]

(In reply to Nazım Can Altınova [:canova][:canaltinova on phabricator] from comment #0)

I noticed that it was rendered incorrectly on Nightly. Checked Chrome and Firefox release versions and they were correct.

Adding to that, the rendering is displayed correctly in release versions of Firefox, because the page has a JavaScript fallback if scroll-driven animations are not available.

And the (main) reason why they don't work correctly is that the animation-range-* properties are not implemented yet, see bug 1825427.

Sebastian

Comment 4

[Boris Chiou [:boris]]

(In reply to Sebastian Zartner [:sebo] from comment #3)

(In reply to Nazım Can Altınova [:canova][:canaltinova on phabricator] from comment #0)

I noticed that it was rendered incorrectly on Nightly. Checked Chrome and Firefox release versions and they were correct.

Adding to that, the rendering is displayed correctly in release versions of Firefox, because the page has a JavaScript fallback if scroll-driven animations are not available.

And the (main) reason why they don't work correctly is that the animation-range-* properties are not implemented yet, see bug 1825427.

Sebastian

Thanks for clarifying this. Add the dependency so we will revisit this bug once we finish animation-range-* properties.

Comment 5

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1817303

Comment 6

[Daniel Holbert [:dholbert]]

I don't think it makes sense to track this as a regression. It happens to manifest as a regression in this particular website, but that's only because the site uses feature-detection to see whether we support scroll-driven animation and they polyfill it if we don't, per comment 3, and their polyfill happens to work better for their use-case than our nightly-only partial implementation.

But this isn't a case where something used to work in Firefox and we've inadvertently broken it; it's just a case of where we enabled a partial implementation, in a Nightly-only way, which happened to toggle this site from using its polyfill to using the partial implementation.

--> Moving regressed-by to dependency.

Comment 7

[Sebastian Zartner [:sebo]]

For what it's worth, the animations on that site got completely broken with the implementation of bug 1825427.

Sebastian

Comment 8

[Sebastian Zartner [:sebo]]

Since bug 2015131 got implemented, the main site and many of the demos now work as expected.🎉 Only a handful of demos and tools are still broken.

Sebastian