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');
    }
}

Tinder

set the height to 100%. Then you can set the overflow to auto – Ginelle

I've set the height of my body and the elements to 100% but that is not what I mean. The page is still wider than the viewport and therefore it automatically is scrollable horizontally as well. I just don't want that to happen. I don't want any horizontal scrolls on my site (because I'm doing swipe and other gestures via javascript). That's why I thought I could simply set overflox-x:hidden so this problem would be solved - and it is - however the next problem occurs which is choppy vertical scrolling. – Tinder

Moreover, I just tested this and even overlow:auto makes the scrolling choppy - in this case x-wise and y-wise. – Tinder

Answer 1

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.

Groningen

I do have already width:100% to .page-wrapper. Also overflow-x:hidden is set to .page-wrapper -> all mentioned above. And even position:relative is set to .page-wrapper, because the layers inside of .page-wrapper are positioned absolutely within .page-wrapper. First off, when applying overflow:hidden I can't scroll vertically any longer - I need to scroll vertically but don't want any horizontal scroll at all. – Tinder

Interesting. I put up a little test page. Is this along the lines of what you're trying to do? Vertical scrolling is possible on my example, though on desktop browsers (FF & Chrome) the scroll bar didn't show at small window widths. If this isn't on target, can you post your work in progress or a test case to see if there's something else causing the issue? – Groningen

Answer 2

Try applying it to every element:

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

Gradatim

I dont know why someone gave -1 for this answer.. it solved my problem directly. +1 – Antiquated

Indeed it is :), well you shouldn't set it to all elements. That's why i guess it got -1. – Kurus

It helped me adding this to body. – Primine

Yes you've saved my day, if's been hours that I'm looking to this solution on the net – Peng

I agree that this solved my problem too. However, what I don't understand is why it is necessary to add it to each element and why it's not the default case? I mean if iOS is such buggy why is it necessary to assign this property even if it isn't a scrollable element? – Intussusception

@julmot because the web is made not just for the iOS – Gradatim

yes but this property is supported only in safari according to developer.mozilla.org/en-US/docs/Web/CSS/… – Lunch

This help! Thanks – Tirol

Find the proper elements to set this on... Not ALL Elements. – Cchaddie

Answer 3

This done the job for me so that it's not a problem on any page:

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

Moneymaker

Answer 4

So I had this issue on a Bootstrap 4.5 template: whenever I added 'overflow-x:hidden;' to .page-wrapper, the scrolling on iPhone was not smooth anymore but choppy.

But when I removed 'overflow-x:hidden;' from .page-wrapper, on iPad the user could move the page horizontally, which is not desired.

The solution of Tim was a great direction, the minimal solution for me was to add these two pieces in my CSS file:

AT THE TOP OF CSS:

html, body {width:100%; height:100%;}

AND IN THE CSS:

.page-wrapper { 
/** overflow-x: hidden; GIVES ISSUES WITH IPHONE!!! **/

    width:100%; 
    height:100%;
    
    position:relative; 
    overflow-x:hidden; 
    -webkit-overflow-scrolling:touch;
}

Don't forget to put in the index.html:

<META name='viewport' content='width=device-width, initial-scale=1.0, shrink-to-fit=no'>

Biocellate

Answer 5

TLDR; apply transform: translate3d(0px,0px,0px) to the element and the wrapper.

In my case, an absolute or fixed position element was hidden behind the main page by having a smaller z-index. The result is that when the wrapper was moved out of the way to revel the element, and then moved back, on iOS there was a delay when trying to scroll over where that element was. I could scroll, but I had to hold down for about a second.

The solution described here worked for me: https://css-tricks.com/forums/topic/mobile-safari-iphone-issue-with-position-fixed-content-running-over-the-top/

Basically, both the element and the element's wrapper need to have the style transform: translate3d(0px,0px,0px) applied, then the scrolling went smoothly. For me, without applying it to both the element and the wrapper, the fix didn't work.

Moreau

Offtopic, but for 15 seconds of laughs apply that transform to *. On the oldest and slowest device you can find. It looks amazing. – Smasher