Overriding Overflow-X CSS Property on iOS

Overriding overflow-x CSS property on iOS

Tried overflow-x: visible; instead? Also I don't believe the !importants are necessary.

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

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.

overflow-x: auto on iPhone is not scrolling

I saw in your sources that you use bootstrap so why you don't just adapt the with to be all inside the screen without any scrolling (horizontal scrolling on cellphone is not really user-friendly for me).

If you really want to use scrolling, I recommend you to use:

-webkit-overflow-scrolling: touch;

instead of

-webkit-overflow-scrolling-x: touch;

Have you tried to use !important?

Overflow-x value ignored in mobile safari

Add html { overflow: hidden; } to your CSS and it should fix it.

Allow horizontal scrolling when window is a specific width with overflow-x:hidden

Yes, you can switch the value of overflow-x on-the-fly with a media query:

@media (max-width: 600px) {
    body {
        overflow-x: auto;
    }
}

Be sure to place this @media rule after your main body rule in your stylesheet, otherwise your overflow-x: hidden declaration will always take precedence.

Note also that while the width media feature corresponds to the width of the viewport, and the body element is not the same thing as the viewport, setting overflow-x this way does in fact affect scrollbars on the viewport and not the body element, which means it works as expected even if your body element is narrower than it would normally be, or you haven't removed its default margins (as authors would usually do). This is intentional behavior, though it may be overridden under certain circumstances.

---

Related Topics