Google Chrome vertical scroll bars mysteriously appear and disappear?

Question

The website I've been working on has this odd, and seemingly non-consistent issue, and it only appears to happen on Google Chrome.

My main content section will, occasionally, product vertical and horizontal scroll bars.

When I open the page as a file, the scroll bars pop up intermittently upon opening the page, and refreshing the page. They usually do not show up, but every couple of refreshes or so, they will pop up.

When I run the page locally using NGiNX, the scroll bars will pop up upon opening the page, but disappear when I refresh and no amount of refreshing will bring them back. If I click back and forth between two different test pages I have set up, the scroll bars stick around. Only upon hitting reload, do they disappear.

I have not seen the issue when I run it from my temp free webhosting site, Zymic. I was actually not even going to worry about it because it didn't show up when it was live, but when I noticed the issue popping up from my locally ran web server, I figured I should look into this.

I have no idea where to start looking for what may be causing the problem, but I'm providing a video that will clearly show the issue, and a link to my current live site. Based on reports of others and my own experiences, the issue will not show up from the live site, but it will give access to all of my current code (current-ish, I'm in the midst of trying some things out) and I will happily provide any specifically requested pieces of code. I would try and supply the bits right away that might be causing the problem, except that I have no idea :\ But if I narrow anything down, I will include that bit of the code along with what I've discovered.

Short 58 second video of the problem: http://youtu.be/K7tjGJ8hIV0

Live site (issue should not occur from this link): http://jrltest.zxq.net/

Thank you all very much!

Answer 1

This is caused by your overflow:auto; style on your #maincontent div. Just change the style to overflow:hidden; to make the scrollbars disappear permanently.

Automatic overflow will work by doing nothing with the overflowing content if it fits in the container, but if it overflows by even a bit, it inserts scrollbars to allow the user to scroll. In your case, Chrome will probably recognise a single pixel of overflow, so insert scrollbars. This probably has to do with caching and image-loading. What I think is that if the image is already in the cache, Chrome knows exactly how big it is, and it knows the image will fit in the container, but when it's not cached yet, it reserves some space for the image to load in, and since that space is apparently slightly larger than the actual image, it will take up some extra space.

Answer 2

Check if body value for you is set to overflow:hidden; If it is, than change it ;)