13

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!

Soundfx4
  • 595
  • 2
  • 8
  • 20
  • 1
    If the answer I posted is the answer you were looking for, please mark it as accepted via the checkbox to the left of my answer. That will mark this question as answered, so others can see that more easily. – Joeytje50 Feb 04 '14 at 21:38

3 Answers3

18

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.

Joeytje50
  • 18,636
  • 15
  • 63
  • 95
  • 1
    Well look at that, it fixed it! Thanks :D That overflow:auto is actually part of a solution to "tape" my footer to the bottom of the browser window no matter how tall the window is, but it may work set to hidden. If not...well I'm finding that I'm having to revisit a lot of solutions that I found that I thought would work :P I'm really new , and still learning so it's all good. Thank you very much, again! – Soundfx4 Feb 04 '14 at 21:50
  • 2
    I tested my site at a higher resolution. A BIG thanks to this thread http://stackoverflow.com/questions/6400207/how-to-simulate-a-higher-resolution-screen and an even bigger thanks to the answer by Emile, who provided a resource for testing at higher resolutions: http://www.infobyip.com/testwebsiteresolution.php My site's footer still sticks to the bottom!! So I am 100% good as far as I can tell :P Thank you once again! – Soundfx4 Feb 05 '14 at 15:42
  • I had this problem with no images whatsoever. So I think this guess about the images is wrong. – Gherman Sep 09 '15 at 12:00
  • @German I can't make a better guess if I don't have a counter-example for my explanation. Could you show in which situation you had this problem? – Joeytje50 Sep 09 '15 at 12:09
  • Yeah but what if your page sometimes has more content so it should show the scrollbars then? But when it doesn't have enough content require the scrollbar, it shouldn't show the scroll bar and it should exhibit the flickering scrollbar problem. – Jason Cheng Mar 19 '21 at 15:48
  • @JasonCheng I can't help you without an actual example of your issue here, but you could try ensuring that the contents of your element with `overflow:auto;` are not _exactly_ the same as the container, but instead have some leeway (about 5px should be fine). Then no matter what rounding happens in the browser, it shouldn't interpret the contents as 'overflowing'. As I explain: it's likely a single pixel of overflow that would cause this, so try to avoid situations where that could occur. If you want me to have a look, link me to a working example (e.g. on jsbin.com) of your issues. – Joeytje50 Mar 20 '21 at 00:03
1

The same Issue occurred to me while coding in Next.js just set overflow: hidden; for the Html tag in the global.css file.

Arjav Sethi
  • 73
  • 7
0

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

Opal
  • 81,889
  • 28
  • 189
  • 210
Andris
  • 3,895
  • 2
  • 24
  • 27