1927325 - transition to value of scroll-animated CSS variable fails

Status: NEW

(Core :: CSS Parsing and Computation, defect, P3)

Description

[Ana Tudor]

Attachment: Left two thirds: Firefox result + Firefox console. Right third: Chrome result + console output.

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:133.0) Gecko/20100101 Firefox/133.0

Steps to reproduce:

1. Give the root element a height a few times bigger than the viewport and tie a custom property prg to the scroll progress.

@property --prg {
	syntax: '<number>';
	initial-value: 0;
	inherits: true
}

html {
	height: 900%;
	animation: prg 1s linear;
	animation-timeline: scroll()
}

@keyframes prg { to { --prg: 1 } }

Note that this requires layout.css.scroll-driven-animations.enabled to be set to true in about:config.

2. Introduce another custom property on the body. This custom property should be lagging behind a bit.

@property --lag {
	syntax: '<number>';
	initial-value: 0;
	inherits: true
}

body {
	--lag: var(--prg);
	background: 
		linear-gradient(90deg, 
			darkorange calc(var(--lag)*100%), #0000 0),		
		linear-gradient(90deg, 
			purple calc(var(--prg)*100%), #0000 0);
	transition: --lag .75s cubic-bezier(1, 0, .5, .5)
}

Actual results:

There is no transition for --lag in Firefox. It's not noticeable visually and transition events don't get triggered.

Expected results:

There should have been a transition for lag --lag. This is what happens in Chrome - the orange progress lags behind the purple one.

Live test https://codepen.io/thebabydino/pen/MWNrdVj?editors=1111

The problem can also be seen here https://codepen.io/thebabydino/pen/poMpGxE?editors=1111

Comment 1

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

The Bugbug bot thinks this bug should belong to the 'Core::CSS Parsing and Computation' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

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

The severity field is not set for this bug.
:jwatt, could you have a look please?

For more information, please visit BugBot documentation.

Comment 3

[Bramus]

I looked a bit into this and my initial assumption was that this was a problem with custom properties that have a transition-delay in general, instead of being a scroll-driven animations specific issue.

My assumption was wrong, as https://codepen.io/bramus/pen/OPXYOGe/92f4554d220712a4fbdc160cadfd4a38 nicely demonstrates that the --lag property does respect the transition-delay. It’s only when throwing scroll-driven animations in the mix, that the --lag one no longer lags.

This lagging technique is the core part of https://brm.us/css-scroll-detection, so it would be nice to see this fixed before scroll-driven animations ship :)

@emilio: Could you link up this bug to scroll-driven animations?

Comment 4

[Emilio Cobos Álvarez [:emilio]]

Boris FYI.

Curious Bramus, do you know if there's any WPT covering this?

Comment 5

[Bramus]

AFAIK there is no WPT for this