CODEWITHSUNDEEP
iphoneioscssscroll
matt
matt

Reputation: 44293

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

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

Upvotes: 33

Views: 40117

Answers (5)

Al-Noor Ladhani
Al-Noor Ladhani

Reputation: 2433

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'>

Upvotes: 0

chdonncha
chdonncha

Reputation: 555

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

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

Upvotes: 1

Julian K
Julian K

Reputation: 2001

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.

Upvotes: -2

Ahmad Mushtaq
Ahmad Mushtaq

Reputation: 852

Try applying it to every element:

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

Upvotes: 59

Tim McElwee
Tim McElwee

Reputation: 496

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.

Upvotes: 34

Related Questions