GoogleChromeLabs/css-paint-polyfill

Updating custom properties does not work

una opened this issue · 1 comments

una commented

I want to update custom properties in an interaction or animation. These properties are consumed by the worklet. Currently, updating of custom properties is not supported by this polyfill.

Alright, I spent a while on this and it turns out Safari has gone to fairly extreme lengths to ensure it's impossible to obtain rendered values of custom properties during CSS animations. Firefox is a similar story. I added animation and transition tracking to the polyfill so that painters update any time a browser commits custom property values, which sortof matches the Chrome behavior for transitioning things that can't be transitioned (snap to end). I have a PR that does "live" animation tracking, but the results aren't particularly compelling: #19