Ask EJ: What part of JavaScript I use is F*cking up my site?

3 up and 1 down, posted by bnb 3853 days ago 3 comments

bnb 3853 days ago.

So I just finished a site for a school project. You can find it at http://bnb.im/. There's a problem on Chrome (and probably Safari, Opera, and IE) where the JavaScript on the page is creating white space on the right side. 

I had someone report to me that when they turned JS off, it went away. I tried adding overflow-x: hidden;, and it worked on Firefox, so I thought it would work everywhere and pushed the site. Turns out I was wrong. Any help/advice is greatly appreciated.

My question: which part of the JavaScript code is creating the white space on the right side of the screen in Chrome (and probably others)?

Additional question: Do you know what I can do to solve it?

Again, my site: http://bnb.im/

timoxley 3852 days ago. link 1 point ▲ ▼

this is really a css issue, not js

rickyduck 3853 days ago. link 1 point ▲ ▼

In fact, it's the .cbp-so-scroller (.portfolio) section that needs an overflow-x of hidden. 

The way I worked this out is by adding a border of 1px to everything. I saw that when .cbp-so-side-right animated in, it was using the space that was created as it is starting to fade in at that point, meaning it is visible on the DOM.

jylauril 3853 days ago. link 1 point ▲ ▼

Well one thing I noticed was that you put the overflow-x: hidden; into html element, when it's actually the body that scrolls. You might want to add the overflow style for the body element instead.

As to what's causing that whitespace, it has something to do with the scroller plugin you have there. I've encountered similar behavior in the past, but I haven't been able to pinpoint what's actually causing it. I always get away with it by adding the overflow hidden styles, though.