Scrolling Past Header and Footer on Chrome

[samuraicow]

When I visit my site in Chrome, I can use my scroll wheel to scroll past the top and bottom of my page. It just keeps scrolling past my content and exposing just the background color. This doesn’t happen in Safari or Firefox. Has anyone else encountered this issue?

[tristup]

Hi @samuraicow,

Thanks for reaching out.
I have checked your website in the updated Mozilla Firefox browser and found the same issue you described. I have found that the background color set to the section is the reason behind your issue, while scrolling into the specific section and the image is taking time to load, it shows the background color. I would suggest you remove the background color and check if that the issue is resolved or not.

If that does not help, please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[samuraicow]

Hi @tristup,

That’s actually not the issue I’m referring to. What you’re pointing to is just the lazy loading of background images, which I’m fine with in order to speed up my load times.

Please view this video to better understand my actual issue: https://vimeo.com/597145611/1d52620227

My issue is specifically regarding scrolling BEYOND the top and bottom of the webpage. As you can see in the video, if I use the scroll wheel on my mouse to scroll beyond the top of my front page, it won’t stop at the top; instead it continues scrolling up beyond the top of my webpage even though that’s not supposed to be possible. If I then try to use the vertical scroll bar in the browser window itself, I can’t actually use it until I scroll down using the scroll wheel back to the actual content of the page. Then I can click and grab hold of the scroll bar on-screen and scroll up and down the page as normal. You’ll see that the scroll bar will stop at what should be the top of my web page, but my mouse’s scroll wheel can then continue scrolling up beyond.

The same goes for the bottom of the web page, which I show at the end of the clip. I can use the scroll bar to scroll to the bottom of the page, but if I use my mouse’s scroll wheel I can scroll beyond the footer.

If I click on a link to another part of the website once I’ve initiated this glitch, it will follow me to other pages. If, however, I don’t initiate this glitch, I won’t encounter it on other parts of my website. It must be something with my front page in particular that’s causing this glitch, and the only thing I can think of is the Slider Revolution taking up the full viewport maybe causing scroll calculation issues?

Again, issue seems unique to Chrome (Mac). I tried it on Firefox and Safari with no issues.

I’ll include login details in a Secure Note as requested.

[ruenel]

Hello @samuraicow,

I am using macOS and I can replicate the behavior on my Chrome, Brave, MS Edge, Safari, and the Firefox browser. This seems to be a behavior of the browsers over which we do not have any control. Please check out my video screencast in the secure note below.

Best Regards.

[samuraicow]

Hi @ruenel,

Interesting. In your examples, the scroll bounces back to the correct topmost or bottom-most edge. With my example, I can keep infinitely scrolling beyond the top edge of my content. I tested this using my trackpad’s two-finger scrolling gesture and get the same behavior you experienced. My issue seems to only occur when I use my bluetooth mouse’s scroll wheel (Logitech MX Master 2S). Perhaps it’s just some sort of weird firmware issue with my mouse and Chrome?

Were you testing using a trackpad or mouse scroll wheel? If the former, are you able to test out using a mouse’s scroll wheel as well? Thanks!

[ruenel]

Hello @samuraicow,

I am using a Magic Mouse so I can not scroll up or down far enough just like you did. On a trackpad, I can scroll up down much farther. With a mouse wheel, you can scroll farther which explains the very big gap shown in your video.

Cheers.