How to get rid of slight jump in content during animation?

How To
1

My hero section’s elements each have an animation. The problem is, when the page loads and the animation is executed, the page moves up a pixel or two which triggers the sticky menu’s scroll which changes the background color. I’ve tried adding a slight delay in the animation so the page loads before the animation starts but that doesn’t work. Any ideas?
https://stage.southelginroofing.com/
Video:
https://tinyurl.com/23he8bwq

2

Hi @kr13,

what’s the browser that you are testing on? I’ve tried on Firefox on macOS, but could not replicate the issue.

Best regards,
Matej

3

Thanks @Matej I’m using Chrome latest version on a Windows 10 pc. It happens regardless of whether I’m logged into the site or not.

4

Hmm, ok, currently I can only test on macOs, but I can’t replicate it here on Chrome either.

The only way I can replicate this, is if I’m not scrolled to the very top. If I scroll just a little bit down, and then refresh, it will show “white” background - which is expected, as I’m not scrolled to the top.

But otherwise I can’t replicate it, so, can you double-check if you are scrolled to the top when you refresh it?

Best regards,
Matej

5

@Matej Turns out, I had to flush the DNS cache, now it works. Thanks for all your help with troubleshooting. Much appreciated.

6

Ah, thanks for your response. Nice to hear that it’s working now :slight_smile:

Matej

7

I see the same issue on your site @kr13 - Chrome on macOS. Oddly, in Chrome Incognito mode it doesn’t do it.

Works fine in Firefox.