Janky Parallax Image in Safari Only

[lukefinsaas]

Hey folks,

I just discovered an issue on one of my sites where the parallax background image jerks around—and just on Safari. It’s the first time I’ve seen this issue with X.

Superior Switchel | A Hydrating Elixir

Any thoughts? I can provide credentials if you’d like to look behind the scenes. The only thing I could think of is that I’ve got a few CSS calc functions?

Thanks.

Luke

[ruenel]

Hello Luke,

Thanks for writing in! Does your issue happens after the update? After doing the updates, always remember to clear all caches (if you are using WP Rocket, WP SuperCache or W3 Total Cache) when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

You may also need to regenerate your minified JS/CSS files.

Please let us know how it goes.

[lukefinsaas]

Hey @RueNel,

I’ve cleared the cache, regenerated the minified files, etc.—no luck. I guess it’s been happening from the start (I used a Safari emulator to test on that browser, where it seemed fine.)

But I think I found the culprit:

I was running a little CSS calc function on the background, in addition to the parallax (background-size: calc (100% - 90px) auto; ). Safari is recalculating that number at every scroll, which is absurd, but that’s what it wants to do! The image is still a little jitterry, but I think that’s because it’s so large.

TL;DR: Don’t run CSS calculations on parallax images in Safari.

[ruenel]

Hello Luke,

We are just glad that you have figured it out a way to correct the said issue.
Thanks for letting us know!

Best Regards.