Header flickers on scroll in Chrome

[devilman]

I’m seeing this issue on two sites:
On my main site: https://www.consolemad.co.uk/ when you start to scroll the page, there is a slight jump in the top bar. It’s most noticeable when using the mouse wheel to scroll down the page. This site is just using the standard theme header with fixed-top. I’m seeing this in Chrome - Firefox is fine.

On a site I’m currently building, I’m seeing the same issue with a custom header that is set to sticky. Unfortunately I can’t link to this site just now. I did try this fix which is a modified version of something I saw on an old forum post:

.stickybar.x-bar {
position: fixed;
width: 100%;
}

.stickybar.x-bar-space {
display: block !important;
}

this sorts the flickering bar out, but then the main page content starts at the wrong place.

Any advice would be appreciated.

[ruenel]

Hello @devilman,

Thanks for writing in! This could be a caching issue. Always remember to clear all caches since you are using WP Rocket so that the code from the latest release is always in use. This will help you to avoid any potential errors. And please clear your browser cache too. You may use private browsing mode in testing your site to make sure that you are viewing the latest codes from the updates and not the cached version in your browser.

This links might help:

• https://docs.wp-rocket.me/article/133-manually-clear-wp-rocket-cache
• https://docs.wp-rocket.me/article/53-clear-wp-rocket-cache

It could also be caused by a plugin conflict, amongst other things. Please check out this troubleshooting article here and follow the instructions for the following sections (where appropriate):

Testing for Plugin Conflict
Child Theme
CSS/JS Customization
Disabling Cache
Disabling CDN

If nothing is helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​
To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[devilman]

Hi Ruenel,

Thank you for getting back to me. I’m pretty sure it’s nothing to do with caching or WP-Rocket. If you look at one of my other URLs: https://www.freezepop.co.uk/ in Chrome, you will see the flicker happens when scrolling there too. This site is a fresh install of WordPress, with no additional plugins and a fresh install of Pro, with the only option changed being the header from Static Top to Fixed Top.

It only seems to happen on the first scroll - if you let the page load and scroll with the mouse wheel, the jump is more apparent. If you then scroll back up and down, it doesn’t seem to happen again.

[marc_a]

Hi @devilman,

I check the two reference website but I wasn’t able to replicate the issue you are facing to. Would you mind sharing a video indicating your issue? and also, please give us the following information in a Secure Note to check your backend settings.

• WordPress Login URL
• Admin level username and password

You can find the Secure Note button at the bottom of your posts.

Thank you.

[devilman]

Here is a link to a short video - https://www.youtube.com/watch?v=BxiFM4CpRCE. As you can see, it doesn’t happen every time on the basic blog and is more noticeable when making larger movements.

[christian]

Hey @devilman,

I could only replicate the issue you showed us by setting the Mouse Scroll Speed in my PC to 1 Screen at a Time.

That is normal if that is the setup.

Let us know what your mouse scroll setup is.

Thanks.

[devilman]

Hi Christian,

My mouse settings is on the default of ‘Multiple lines at a time’. If you’re not able to recreate it, I guess I’ll just have to class it as an issue with Chrome, as Firefox is fine. Thank you for your help anyway.

[ruenel]

You are most welcome.