Overriding overflow-x CSS property on iOS

Question

We have a base style sheet for a mobile web app where we have html and body set to overflow-x:hidden to prevent any horizontal scrolling.

However on 1 page, we have an iframe that opens external sites, some of which are not necessarily mobile optimized, so we want to allow horizontal scrolling.

I thought I could just override the overflow-x:hidden, with overflow-x:auto !important, but it doesn't work. The only way I can make it work is remove all notion of overflow-x, and the scrolling works fine. It also works as expected in Safari + Chrome.

Any ideas?

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\">
  <head>
    <meta http-equiv='Content-Type' content='text/html;charset=utf-8'/>         
    <meta name = "viewport" content = "width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />

    <style>

      /* Styles from existing style sheet */
      html, body {
        position:relative;
        height:100%;
        width:100%;
        padding:0;
        margin:0;
        overflow-x:hidden;
      }

      /* Overrides */
      html, body{
        width:auto !important;
        height:auto !important;
        overflow-x:auto !important;
      }

    </style>
  </head>
  <body>
    <iframe src="http://starbucks.com"></iframe>
  </body>
</html>

BoltClock · Accepted Answer · 2011-03-02 19:28:50Z

1

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

answered Mar 2, 2011 at 19:28

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Brian Stoner Over a year ago

sweet, visible works, thanks. I still don't understand why auto won't work though. I'll remove the !important's, they snuck in out of frustration.

BoltClock Over a year ago

@Brian Stoner: visible is the default value for overflow and its monoaxial counterparts. It means the content will visibly overflow the container. Auto on the other hand causes scrollbars to appear if there's an overflow. In Mobile Safari there is no notion of scrollbars though, so that's the problem.

Brian Stoner Over a year ago

ah, that makes sense. Thanks for the responses, much appreciated.

Collectives™ on Stack Overflow

Overriding overflow-x CSS property on iOS

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related