iphone - iOS overflow-x (or position absolute) makes scrolling choppy?

Question

I want my webpage to be only scrollable vertically. So I've set overflow-x:hidden; to my .page-wrapper. My .page-wrapper holds two absolute positioned layers on top of each other. When clicking a button the top layer is sliding to the side (as mentioned position:absolute;) and makes the website actually wider than the 100% viewport witdh - so it would be scrollable horizontally.

To prevent the horizontal scrolling I've set overflow-x:hidden to my .page-wrapper.

If I do that, the vertical scrolling of my normal content is really buggy and doesn't work correctly.

Any ideas how to fix that?

UPDATE

-webkit-overflow-scrolling: touch; seems to work fine as long no javascript is changing any heights. See the following example. What I'm doing here is updating the height of the body to the contents-height of the second layer - so there is no empty scrolling space once the upper layer is slid to the left. When sliding the upper layer back I remove the attribte style (which sets the height) from the body. After doing that the scroll is choppy again.

function showInfos(show) {

    if ( show ) {
        $('#videos').addClass('slid');
        $('body').height($('#infos > .content').height());
        $('#page-wrap').addClass('no-overflow');
    } else if ( !show ) {
        $('#videos').removeClass('slid');
        $('#page-wrap').removeClass('no-overflow');
        $('body').removeAttr('style');
    }
}

Answer 1

Try applying it to every element:

* {
  -webkit-overflow-scrolling: touch;
}