matt matt - 1 year ago 74
CSS Question

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

I want my webpage to be only scrollable vertically. So I've set

to my
. My
holds two absolute positioned layers on top of each other. When clicking a button the top layer is sliding to the side (as mentioned
) 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
to my

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?


-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
(which sets the height) from the body. After doing that the scroll is choppy again.

function showInfos(show) {

if ( show ) {
$('body').height($('#infos > .content').height());
} else if ( !show ) {

Answer Source

You could try setting width:100% on .page-wrapper and set that to overflow:hidden and position:relative. That might prevent the horizontal scroll.

Updated 10/12/2012

Thanks for the code example. It really helped me see your intent and the issue with scrolling more clearly. It looks like you need -webkit-overflow-scrolling. Add -webkit-overflow-scrolling: touch; to page-wrapper. Here's an [updated test page] with that rule applied. You can compare with test page in my comment below to see the difference.