Overflow-x la valeur ignorée dans le navigateur safari mobile

Nous avons mis l'overflow-x valeurs cachées sur le corps et le défilement des éléments, mais le navigateur Safari mobile ignore ces valeurs. Sur le bureau, le dépassement des valeurs les beaux travaux.

Code:

body { overflow-x:hidden; width:320px; height:100%; min-height:100%; margin:0; background:-webkit-linear-gradient(top,#e8e4dc,#f2f0eb); }

.page_list, .content { max-height:370px; box-sizing:border-box; padding:0; overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch }

#catalog_page { border-left:1px solid #CCC; z-index:28; position:absolute; top:0; width:200px; height:460px; background:white; -webkit-transition:-webkit-transform 0.1s ease-in;; -webkit-transform:translate3d(0,0,0); display:none; }

catalog_page est ce qui se trouve en dehors de la fenêtre, coulissant en vue seulement après que quelqu'un fait un geste.

À reproduire:

1) Visite www.tekiki.com sur votre iPhone (pas d'iPad). Faites défiler vers la droite, et vous verrez comment catalog_page s'étend le site de la largeur, même si l'on fixe la largeur du corps.

OriginalL'auteur Crashalot | 2013-07-20

  1. 12

    Ajouter html { overflow: hidden; } à votre CSS et ça devrait résoudre le problème.

    génial, merci! nous avons essayé overflow-x sur l'élément HTML avant, et ça ne fonctionne pas? pourquoi cela est-il résoudre ce problème? btw, pourriez-vous également m'envoyer un email à info à panabee.com? voudrais vous poser une question rapide. merci!
    Je voudrais aussi ajouter "overflow-y: auto" de sorte que vous pouvez défiler vers le haut et vers le bas.
    Wow, merci! Tous les hacks pour ce problème sont terribles. Cela a fonctionné parfaitement (iOS 10 ici). Aussi, je suis le seul à l'aide de overflow-x et il fonctionne tout aussi bien.
    ce travail, mais dans ios, le soft de défilement est désactivé , aucune solution?

    OriginalL'auteur keirog

  2. 4

    Testé avec le navigateur Safari Mobile sur iOS 7.1/8.2
    Code suivant ne fonctionne pas pour moi non plus.

    html { overflow: hidden; }

    Je crois que c'est un bug/feature de Mobile Safari, les autres navigateurs, y compris Safari sur mac OSX fonctionne bien. Mais le overflow:hidden fonctionne sur iPhone/iPad si vous avez également définir la position:fixe à l'élément HTML. Comme ceci:

    html { overflow: hidden; position: fixed; }

    OriginalL'auteur Suyuan Chang

  3. 2

    Ajouter du code html { overflow: hidden; } à votre CSS et ça devrait résoudre le problème.

    Cette solution ne fonctionne pas pour moi.

    Au lieu de cela, j'ai créer un wrapper div à l'intérieur du corps et d'appliquer la overflow-x:hidden de l'emballage :

    CSS

    #wrapper { 
    overflow-x: hidden;
}

    html

    <html>
...
<body>
<div id="wrapper">
...
</div>
</body>
</html>
    Pourquoi la baisse de vote ? Cette solution fonctionne pour moi et non pas celui qui est accepté.
    C'est pourquoi, parfois, je déteste stackoverflow, ouais ça marche pour moi
    Ne fonctionne pas pour moi. Le contenu déborde et j'ai un énorme de défilement. C'est honnêtement applicable seulement dans des scénarios très spécifiques.
    Pourriez-vous montrer un exemple ? Comme je l'ai dit, il a travaillé pour moi et pas la accepté de répondre.
    J'ai eu un div avec width:3000px; position: absolute; bottom: 0; ne sais pas si ce suffisant pour reproduire la non-applicabilité, ou si d'autres éléments dans mon DOM fait une différence.

    OriginalL'auteur Sébastien Gicquel

  4. 1

    dans mon cas, la suite ont permis de résoudre le problème

    body, html {
  overflow-x: hidden;
}
    Cela ne répond pas à la question. Évidemment, cela ne fonctionne pas pour le safari version il y a 2 ans.

    OriginalL'auteur cokoon

  5. 0

    Afin de résoudre le problème sur les anciens appareils (iphone 3) ainsi, j'ai dû mélanger les solutions, parce qu'ils n'ont pas de travail singulièrement.

    J'ai fini par l'ajout d'un wrapper div pour le corps html:

    <html>
  <body>
    <div id="wrapper">....</div>
  </body>
</html>

    et style avec:

    #wrapper { 
  overflow: hidden 
}

    et il a finalement fonctionné.

    OriginalL'auteur spaghetticode

  6. 0

    Si le html, le corps overflow-x: hidden; ne fonctionne pas pour vous, essayez de rechercher text-indent. Les paramètres par défaut de flexslider, par exemple, certains éléments de text-indent -9999px. Je trouvais que c'était primordial html dépassement des règles.

    OriginalL'auteur Nathan Shanahan