Snap.js and bootstrap, padding where scrollbar should be (on android device)

Question

i'm using snap.js (jakiestfu) in combination with bootstrap. When i view my page on android in the standard "internet" browser i get a padding where the scrollbar would be in a normal browser (see image http://s27.postimg.org/61osu9y03/example.jpg).

This padding only occurs on the main content container of snap.js, not the sliding panels as you can see. This is the css of .snap-content:

<pre>
.snap-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 2;
  overflow-y:scroll;
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
       -o-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
</pre>

-When i set position to relative the padding is gone.

-When i set overflow to hidden or remove the overflow tag the padding is gone. This however screws with the markup.

Here is a working example http://koenjacobsdesign.nl/vf/index.html

Remember: (as far as i know) this problem obly occurs on androids standard "internet" browser, it works fine on mobile chrome.

Answer 1

Eventually solved the problem myself, here's the solution, maybe it can help other people in the future:

After excluding and including all my stylesheets one by one and taking apart the css code i was able to isolate where the problem came from. Aparently it happens when u add a Box shadow to the ".snap-content" container. I replaced the box shadow with a border and now it works fine.