Overriding overflow-x CSS propiedad en iOS

Question

Mar 02, 2011, 08:06 PM

Overriding overflow-x CSS propiedad en iOS

Tenemos una hoja de estilo base para una aplicación web móvil donde tenemos HTML y cuerpo configurados en overflow-x: ocultos para evitar cualquier desplazamiento horizontal.

Sin embargo, en 1 página, tenemos un iframe que abre sitios externos, algunos de los cuales no están necesariamente optimizados para dispositivos móviles, por lo que queremos permitir el desplazamiento horizontal.

Pensé que podría anular el overflow-x: hidden, con overflow-x: auto! Importante, pero no funciona. La única forma en que puedo hacer que funcione es eliminar toda noción de overflow-x, y el desplazamiento funciona bien. También funciona como se esperaba en Safari + Chrome.

¿Algunas 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>