iOS 上的水平滚动 — 关闭画布导航菜单答案

【问题标题】：Horizontal Scroll on iOS — Off Canvas Navigation MenuiOS 上的水平滚动 — 关闭画布导航菜单
【发布时间】：2015-06-05 01:26:45
【问题描述】：

将我的网站推送到开发服务器后，我在 iOS 上看到了水平滚动（我在本地开发时没有看到）。我正在使用一个非画布导航菜单，它为页面提供了额外的宽度。 Here is the site.

非常感谢任何帮助。感谢您的宝贵时间！

【问题讨论】：

【解决方案1】：

我在 Desktop Safari 中检查了您的网站，发现同样的问题。

问题似乎是站点布局仍然认为它更宽。起初我确信 overflow-x:hidden 和 width:100% 的简单应用就可以解决问题。

然而——

我发现很难筛选 CSS，因为你有很多事情要做，而且我认为 CSS3 转换可能会导致问题，但我能够在桌面 Safari 中查看时锁定它，而inspecting Mobile Safari directly 带有以下内容：

将position:fixed 应用于您的主导航，而不是position:absolute。 Desktop Safari 对此很满意。
删除您的 .site-content::before 伪元素。 这仍然是导致 Mobile Safari 出现问题的原因。移除到 translate3d(100%,0,0) 的 CSS 转换也有帮助。

附注：您还可以考虑简化 HTML 和/或 CSS 的方法。您有 1.1MB 的加载，没有任何真实图像；对于移动用户来说，带宽是一项真正的成本。我知道这可能是一个 PITA，但值得一提。祝你好运！

【讨论】：

非常感谢您抽出宝贵时间帮助我解决这个问题！我非常感谢您和 StackOverflow 社区。谢谢！我所做的是，将.nav-primary 设置为position:fixed; 并将.site-content::before 设置为position:fixed;。
很高兴它有帮助！欢迎来到 SO 社区，从一个相对的新手到另一个...