在移动safari中忽略Overflow-x值 [英] Overflow-x value ignored in mobile safari

问题描述

我们将overflow-x值设置为隐藏在body和scrollable元素上，但移动Safari忽略这些值。在桌面上，溢出值工作正常。

相关代码：

  body {overflow-x：hidden; width：320px;高度：100％; min-height：100％; margin：0;背景：-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指数：28; position：absolute; top：0; width：200px; height：460px;背景：白色; -webkit-transition：-webkit-transform 0.1s ease-in ;; -webkit-transform：translate3d（0,0,0）; display：none; } 
  

catalog_page是在视口外部， p>

要重现：

1）访问 www.tekiki.com 在您的iPhone（而不是iPad）。滚动到右侧，您将看到catalog_page如何扩展网站的宽度，即使我们修正了body宽度。

解决方案

添加 html {overflow：hidden; } 到你的CSS，它应该修复它。

We set the overflow-x values to hidden on both the body and scrollable elements, but mobile Safari ignores these values. On the desktop, the overflow values work fine.

Relevant 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 is what sits outside the viewport, sliding into view only after someone does a gesture.

To reproduce:

1) Visit www.tekiki.com on your iPhone (not iPad). Scroll to the right, and you'll see how catalog_page extends the site's width, even though we fixed the body width.

解决方案

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

这篇关于在移动safari中忽略Overflow-x值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！