移动Safari中忽略了溢出-x值

时间:2013-07-20 22:09:53

标签: iphone ios css html5 mobile-safari

我们将overflow-x值设置为隐藏在正文和可滚动元素上,但移动版Safari会忽略这些值。在桌面上,溢出值工作正常。

相关代码:

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位于视口外部,只有在有人做出手势后才能进入视图。

重现:

1)访问iPhone(而不是iPad)上的www.tekiki.com。滚动到右侧,即使我们修正了车身宽度,您也会看到catalog_page如何扩展站点的宽度。

9 个答案:

答案 0 :(得分:12)

html { overflow: hidden; }添加到您的CSS中,它应该修复它。

答案 1 :(得分:4)

在iOS 7.1 / 8.2上使用Mobile Safari进行测试 以下代码对我来说既不适合。

  

html {overflow:hidden; }

我相信它是Mobile Safari的一个错误/功能,其他浏览器,包括OSX上的Safari运行良好。但溢出:隐藏在iPhone / iPad上的工作,如果你也设置位置:固定为HTML元素。像这样:

  

html {overflow:hidden;位置:固定; }

答案 2 :(得分:3)

现在是2020年,但我仍在努力寻找答案。

经过多次实验,我发现this answer实际上是唯一可以工作的工具。

但是,它会在所有浏览器中的整个页面上创建一个奇怪的黑条。另外,请勿将单位用于零值。

因此,我的最终解决方案是:(任何转换函数都可以解决问题,只记得设置零值即可。)

html, body {
    ... (font, background, stuff)

    overflow-x: hidden;
    /* Safari compatibility */
    height: 100%;
    width: 100%;
    transform: translate3d(0,0,0);
}

请注意,此解决方案可能会影响您的导航。 “位置:固定;”由于“ transform”属性设置了“ none”以外的内容,因此无法在儿童上使用 https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed

答案 3 :(得分:2)

  

添加html {overflow:hidden;你的CSS应该修复它。

此解决方案对我不起作用。

相反,我在body中创建一个包装器div并将overflow-x:hidden应用于包装器:

<强> CSS

#wrapper { 
    overflow-x: hidden;
}

<强> HTML

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

答案 4 :(得分:1)

在我的情况下,以下确实解决了问题

body, html {
  overflow-x: hidden;
}

答案 5 :(得分:1)

我有以下代码来禁用双击缩放:

* {
  touch-action: none;
}

这虽然打破了溢出滚动。这是我的解决方法:

pre {
  overflow-x: scroll;
  touch-action: pan-x;
}

答案 6 :(得分:0)

为了解决旧设备(iphone 3)上的问题,我不得不混合解决方案,因为它们没有单独工作。

我最终在html正文中添加了一个包装div:

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

并使用以下方式设计样式:

#wrapper { 
  overflow: hidden 
}

它终于奏效了。

答案 7 :(得分:0)

如果是html,正文overflow-x: hidden;无效,请尝试查找text-indent。例如,flexslider的默认设置将一些元素设置为text-indent -9999px。我发现这是重写html溢出规则。

答案 8 :(得分:0)

我实际上放弃了IOS Safari中的CSS溢出-x。 我改用了脚本

$(window).scroll(function ()
{
    if ($(document).scrollLeft() != 0)
    {
        $(document).scrollLeft(0);
    }
});