Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS jQuery Generated Variable Not Passing to CSS Keyframe Animation on Safari

T

thewildinitiative

New Coder
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...
  • 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: https://codepen.io/thewildinitiative/pen/eYLydBK

Any thoughts on what's going on?
 

New Threads

Latest posts

Share this page

Buy us a coffee!

Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom