No replies
thewildinitiative's picture
Last seen: 12 weeks 5 days ago
Timezone: GMT-7
Joined: 2023-03-10
Posts: 1
Points: 2

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.
  • From all this, it seems to be a problem with the combination of the variable being defined in jQuery (also didn't work for straight JavaScript) and being used in the animation.

You can access my Code Pen demonstrating the issue here:

Any thoughts on what's going on?