Scroll bar leaves white space #59

Tswyter opened this Issue Mar 15, 2013 · 15 comments


None yet

Tswyter commented Mar 15, 2013

So the fullscreen slider is awesome but there's a white space where the scroll bar would normally be. Any idea how to get rid of that?

It fixes it's self when you resize the browser.

I am having the exact same problem.

Hi guys. Thanks for this plugin, it's better of supersized.
I had the same problem, I solved by removing this from my css.

body {
line-height: 100%;

I used: superslides-0.5-stable.
I don't understand why, but this run for me.

I hope I have helped you :) and Sorry for my english.

I'm also having the same problem. The vertical scrolling bar space remains blank (the bar doesn't show because overflow is correctly set to hidden) but only when I resize browser's window screen from portrait back to landscape. No suggested solution seems to have effect for now...

The wierd thing is that it happens to me also with downloaded demo while no scroll bar space appears on online slider... there must be something different in the css but I can't figure out what it is...

sorry, but I solved my issue: I found I had html {overflow-y: auto;} in my css template. by setting it to hidden (at least in the page where fullscreen slider is shown) no empty spaces remain. hope it may help... thanx

Unfortunately, no luck here with the overflow-y suggestion...

I've also noticed that the online demo appear to be working fine, but when downloading it, this problem occurs...

Some more details on this:

It seems to be a miscalculation of the $window.width() in the object init. For me, it's returning 1267px instead of 1280px. I've removed all CSS and the HTML has the most basic structure possible. It's like it's drawing the scrollbar and then hiding it, ence giving the wrong width to the Superslides script.

Once you trigger the window.resize event, the script calculates the width and height again, and it works as intended.

I had the same problem today. 2 ways that worked for me:
$(window).resize(function() {
$('body').css('overflow', 'visible');
}, 200)

body{overflow: visible !important;}


I am facing the same issue. Does anybody have the solution?

ineptian commented May 1, 2014

christian70's solution of adding: html{ overflow-y: hidden; } fixed this for me as well.

I was only experiencing the problem with the white space in place of scroll bar when re-sizing the browser from the corner. When re sizing from the side or bottom it wasn't an issue

Hi guys,
I think that the black bar is exactly the size of the scroll bar which appears before the page is completely loaded. (Just a guess).

Thinking of that, I called supersliders Jquery using $(window).load function, instead of "ready". It worked fine for me:


Injecting body {overflow: hidden} fixed it for me.

Hey everybody, try dark background to body and everything will be all right. :)

None of these worked for me :(

Finally, I used my own fix:

$(".slides-control").css("width", $(window).width());
}, 500);

Had the same problem:

body {
overflow-x: hidden !important;

fixed it for me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment