Bug 201736 - CSS variables in keyframes don't work
Summary: CSS variables in keyframes don't work
Status: RESOLVED DUPLICATE of bug 248145
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2019-09-12 13:12 PDT by Simon Fraser (smfr)
Modified: 2022-11-29 02:25 PST (History)
11 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Simon Fraser (smfr) 2019-09-12 13:12:34 PDT 
The bubbles on this demo should have color, and do not:
https://codepen.io/sandrina-p/pen/axVeGg

Mentioned on https://css-tricks.com/using-custom-properties-to-wrangle-variations-in-keyframe-animations/
Comment 1 Radar WebKit Bug Importer 2019-09-12 13:13:02 PDT 
<rdar://problem/55314274>
Comment 2 Ahmad Saleem 2022-08-29 07:18:38 PDT 
I am able to reproduce this bug in Safari Technology Preview 152 on macOS 12.5.1 using CodePen from Comment 0 and it does not update color on circles while Chrome Canary 107 and Firefox Nightly 106 show color matching with text when you hover or move mouse on the CodePen. In case of Safari, the color remain just grey for bubbles.

Just wanted to share updated testing results. Thanks!
Comment 3 Ahmad Saleem 2022-08-29 07:18:42 PDT 
I am able to reproduce this bug in Safari Technology Preview 152 on macOS 12.5.1 using CodePen from Comment 0 and it does not update color on circles while Chrome Canary 107 and Firefox Nightly 106 show color matching with text when you hover or move mouse on the CodePen. In case of Safari, the color remain just grey for bubbles.

Just wanted to share updated testing results. Thanks!
Comment 4 Antti Koivisto 2022-08-29 08:33:14 PDT 
The issue is the we don't invalidate keyframes when a variable value changes so fail to reflect changes correctly. To implement this we need to track if the keyframe uses any variables and invalidate it on variable mutation (preferably only when a variable that is actually used changes). There is somewhat similar mechanism already for container units (KeyframeList::usesContainerUnits() etc).
Comment 5 Antoine Quint 2022-11-29 01:14:21 PST 
We did some work recently (see bug 248145) to improve support of CSS variables with animations but this bug persists.
Comment 6 Antoine Quint 2022-11-29 02:25:11 PST 
I was wrong, this is fixed in ToT, marking as a dupe.

*** This bug has been marked as a duplicate of bug 248145 ***