Clever Geek Handbook

Overriding the overflow-x CSS property in iOS

We have a basic stylesheet for a mobile web app where we set the html and body to overflow-x: hidden to prevent 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 overflow-x: hidden, with overflow-x: auto! important, but it doesn't work. The only way to make it work is to remove all overflow-x concepts and the scrolling works fine. It also works 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>
+1


source to share


1 answer


Have you tried overflow-x: visible;

this instead? Also I don't think they are !important

necessary.



+1


source






More articles:


All Articles