Closed Bug 1763376 Opened 2 years ago Closed 3 days ago

Custom properties introduced by @keyframes have no effect

Categories

(Core :: CSS Transitions and Animations, defect)

Firefox 98
All
Unspecified
defect

Tracking

()

RESOLVED DUPLICATE of bug 1846516

People

(Reporter: peter, Unassigned)

References

(Blocks 3 open bugs)

Details

Steps to reproduce:

Open https://codepen.io/SirPepe/pen/eYyVbPR?editors=0100

Actual results:

The background colors stays at its default value.

Expected results:

The background changes color (in discrete steps) as the animation updates the value of the custom property --color, like it does in Chrome.

We don't handle custom properties and css var well in @keyframe rules.

Perhaps we could fix this together with bug 1710735.

Severity: -- → S3
Status: UNCONFIRMED → NEW
Ever confirmed: true
Hardware: Unspecified → All
See Also: → 1710735

The issue seems to be that when we're building the keyframes, we build the custom properties block correctly, but we don't store custom properties into the AnimatedValueMap (which is a map from LonghandId to AnimationValue).

This is problematic, because if the properties referencing the custom properties aren't in the @keyframes block, then we just lose them. We should probably put them somewhere in the AnimationValueMap instead and cascade them. Maybe that allows us to remove that hacky code-path I've always complained about (PropertyDeclarationBlock::cascade_custom_properties_with_context).

Blocks: 1760446
Blocks: 1813268
See Also: 1710735
Duplicate of this bug: 1323486

This is a bug that I stumble upon very often. Having registered custom properties will be great, and if we could prioritize this one, we could fix some of the interop issues. For example, my recent CodePen that has this issue: https://codepen.io/kizu/pen/zYQdamG — working in Chrome and Safari, but not working in Firefox.

The testcase in https://codepen.io/SirPepe/pen/eYyVbPR?editors=0100 works now, but looks like we still have issue in https://codepen.io/kizu/pen/zYQdamG

Looking at tescase <https://codepen.io/kizu/pen/zYQdamG>, Firefox produces expected behavior if --is-on: initial is replaced with --is-on: lightgreen and --is-off: initial is replaced with --is-off: pink.

initial (as well as inherit, revert, and revert-layer behaves incorrectly for CSS variables in keyframes, which is tracked in bug 1533327.

The testcase in comment 0 passes as of bug 1846516 (specifically, <https://hg.mozilla.org/mozilla-central/rev/1c44d9efbe3a>

Status: NEW → RESOLVED
Closed: 3 days ago
Duplicate of bug: 1846516
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.