Fri, 2023-03-10 15:36
I have a CSS keyframe animation that uses a CSS variable as one of the animation properties. This variable is defined in jQuery. The entire animation seems to work fine in Chrome and Firefox. However, in Safari and on mobile browsers, only the portions of the animation not using the variable work correctly.
I've spent a lot of time trying to debug the issue. Some of the notable steps are listed...
- Testing on the most recent versions of all browsers.
- Checking my Developer tools on the page in Safari shows the variable as being defined correctly (e.g. 1200px).
- I've hard-coded the variable as that same pixel number in the CSS and the animation works as expected.
- I've hard-coded the variable as that same pixel number in jQuery (rather than having it calculated) and the animation doesn't work.
- I've used the variable as a property in the element selector itself (rather than the keyframe) and it positions the element as expected.
- Sometimes, after a while, I'll notice the animation will randomly "kick in" and start working. But, I can't replicate whatever triggers it.
You can access my Code Pen demonstrating the issue here: https://codepen.io/thewildinitiative/pen/eYLydBK
Any thoughts on what's going on?