移动 safari 中忽略的溢出 x 值

Question

我们将 body 和可滚动元素的 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 如何扩展网站的宽度，即使我们固定了正文宽度。

原文由 Crashalot 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

将 html { overflow: hidden; } 添加到您的 CSS，它应该可以修复它。

原文由 keirog 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

经过多次实验，我发现 这个答案 实际上是唯一可行的。

但是，它确实会在所有浏览器的整个页面上创建一个奇怪的黑条。此外，您不应为零值使用单位。

因此，我的最终解决方案是：（任何转换函数都可以解决问题，只记得设置零值即可。）

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

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

请注意，此解决方案可能会影响您的导航。 “位置：固定；”由于“转换”属性设置了除“无”之外的其他内容，因此不适用于儿童 https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed

原文由 loikein 发布，翻译遵循 CC BY-SA 4.0 许可协议