Question - Support for CSS Keyframe Animations?
See original GitHub issueFirst, thanks for the ponyfill! We appreciate the effort put into this and has given us some hope of using modern CSS features in older browsers.
We are attempting to use this for a CSS keyframe animation, but it does not seem like the generated keyframe is being applied properly. It does look like css-vars-ponyfill
is inserting the new values for variables as expected, but it seems as if it does not replace the keyframe with the updated values.
Our question is if there is something special we need to do for animations, or should this work as we would like?
Here is an example. This is the CSS we start with:
:root {
--red: 123;
--blue: 9;
--green: 255;
}
@keyframes test {
0% {
box-shadow:0 -2.6em 0 0 rgba(var(--red), var(--green), var(--blue), 1);
}
100% {
box-shadow:0 -2.6em 0 0 rgba(var(--green), var(--red), var(--blue), 1);
}
When we run css-vars-ponyfill
, we get the following style tag inserted:
<style id="css-vars-ponyfill">
/*__CSSVARSPONYFILL-1__*//*__CSSVARSPONYFILL-3__*//*__CSSVARSPONYFILL-5__*//*__CSSVARSPONYFILL-7__*//*__CSSVARSPONYFILL-9__*//*__CSSVARSPONYFILL-11__*//*__CSSVARSPONYFILL-13__*/@keyframes test{0%{box-shadow:0 -2.6em 0 0 rgba(27, 117, 187, 1);}100%{box-shadow:0 -2.6em 0 0 rgba(117, 27, 187, 1);}}
/*__CSSVARSPONYFILL-17__*//*__CSSVARSPONYFILL-19__*//*__CSSVARSPONYFILL-21__*//*__CSSVARSPONYFILL-23__*//*__CSSVARSPONYFILL-25__*//*__CSSVARSPONYFILL-27__*/
</style>
And when we perform an update on our code (--red
is 123 and --green
is 0 say) we get the following output:
<style id="css-vars-ponyfill">
/*__CSSVARSPONYFILL-1__*//*__CSSVARSPONYFILL-3__*//*__CSSVARSPONYFILL-5__*//*__CSSVARSPONYFILL-7__*//*__CSSVARSPONYFILL-9__*//*__CSSVARSPONYFILL-11__*//*__CSSVARSPONYFILL-13__*/@keyframes test{0%{box-shadow:0 -2.6em 0 0 rgba(123, 0, 0, 1);}100%{box-shadow:0 -2.6em 0 0 rgba(0, 123, 0, 1);}}
/*__CSSVARSPONYFILL-17__*//*__CSSVARSPONYFILL-19__*//*__CSSVARSPONYFILL-21__*//*__CSSVARSPONYFILL-23__*//*__CSSVARSPONYFILL-25__*//*__CSSVARSPONYFILL-27__*/
</style>
That seems correct to us, but it does not apply to the existing component as expected.
Issue Analytics
- State:
- Created 5 years ago
- Comments:9 (4 by maintainers)
I have been taking a look at the
/*__CSSVARSPONYFILL-XX__*/
issue this morning. I do still see it happening on our end. I’ll open up a new issue so it doesn’t get lost at the bottom of this one.Excellent! Good to hear it is working well for you.
Thanks again for taking the time to open the issue. This could have been a tricky issue for others to work through on their own, so it’s nice to have a fix baked into the ponyfill.
Two quick closing items:
I’m still curious as to why you are/were seeing the internal
/*__CSSVARSPONYFILL-XX__*/
placeholders in your CSS output. Can you confirm that this is still the case? If so, this is definitely an issue that needs to be addressed.Since you are using React, you may be interested in the new
options.watch
that was also added in 1.8.0.Thanks again, @pseudoramble!