在 safari 9.1.2 上导航后禁用滚动

Posted 2023-04-13

【中文标题】在 safari 9.1.2 上导航后禁用滚动

【英文标题】：Scrolling disabled after navigating back on safari 9.1.2

【发布时间】：2017-01-24 20:13:53

【问题描述】：

首先，很抱歉我没有minimal, verifiable 测试用例。我在 Safari 上遇到的问题，但我没有任何 Apple 产品。

在this website 上，存在一个错误，即用户导航返回后无法再滚动页面。您可以点击链接，单击其中一个按钮，返回（通过滑动、单击按钮或使用快捷方式），然后您将无法再使用触控板或鼠标滚轮滚动页面。我基本上不知道是什么原因造成的。

报告此问题的用户使用的是 Safari 9.1.2

【问题讨论】：

只是为了确认：我可以使用 Safari 9.1.2 在我的 rMBP 15"（2015 年中，OS X 10.11.6）上重现此问题。我花了将近一个小时寻找，但找不到任何导致这种情况的原因。

（无法测试，因为我没有 Safari 9.1.2。）。导航回来后，检查器中的 CSS body 属性是否发生变化？您在 stylesheet.css 中有body overflow-x: hidden;（第 38 行）。删除这个（或任何其他身体属性）是否有帮助？这可能是 Safari 9.1.3 中已更正的错误。我也无法在 Safari 9.0.x 中重现这一点

我无法从 Safari 6 - 9 重现该问题。

【参考方案1】：

简而言之：

我相信答案是：您网站的代码没有任何问题。

---

事实上，我认为是硬件相关，所以很多人无法重现这个问题，它只影响到部分用户。

我已经使用我的 Mac 和 Browserstack 在从 Lion/Safari 6 到 El Capitan/Safari 9 的每个操作系统上测试了该网站，使用触控板和魔术鼠标。

在每种情况下，网站都正常运行。

正如您所说，触控板受到影响，我想补充一点，任何 2 根手指滑动都可能是确切原因，而 1 根手指滑动则不是。

我说它与硬件有关的原因：因为 Apple 运行论坛上的用户抱怨同样的问题，并表示 PRAM 重置是解决问题的原因 .

Swipes and scrolling stop working in Safari

更多用户在 Apple 论坛上提出投诉。

Apple users place the blame on everything from OS upgrades to system bugs and failing hardware .

---

最后：有一件事是确定的。我没有看到一个用户声称这是网站编码的结果。

【讨论】：

我的荣幸！我们都从您的问题中获得了知识——干杯

【参考方案2】：

我无法测试它，因为我没有任何 OSX，但我在开发任何网站时从未遇到过这个问题。尽量不要依赖 body 的溢出规范，让它自动。 如果 X-line 中的页面溢出，那么您的内容结构或样式不佳（如果谈论响应式 Web 开发）。 如果 Y 线上有东西溢出，那么即使你没有在 body 的样式中声明它，它仍然可以滚动。

然后你声明了 box-sizing:border-box;与位置：相对；到所有元素（*、*:after、*:before）。也删除它，无需重新声明这些属性，并且在处理不同元素时可能会导致问题。 认为html元素是有默认属性的，好习惯是去学习理解，而不是随心所欲的随意改变……

最后，如果您检查控制台，您会发现一些 jquery 错误，这些错误可能会导致锁定某些 css 类或页面加载问题。

1- Delete body's overflow declarations.  

2- Delete * stylings (* styles must be used only to homogenize text, as font  family and font width, or other few generic non-structure modificable things)

3- repair JQuery errors.

希望对你有帮助，干杯！

【讨论】：

我一直误解你为什么需要隐藏溢出。正如溢出的文档所说（溢出被剪辑，其余内容将不可见）并且经验表明它可能导致内容不可滚动。如果需要，溢出自动会带来滚动条，溢出滚动会使滚动条出现，有时即使不需要。如果你长时间使用它没关系，但它是错误的。无论如何，如果您开始使用引导程序而不是自己动手，那可能会很好。尝试执行第 1 点和第 2 点，看看会发生什么。

因此，如果您不想尝试一些可能的网站修复工作，为什么要在这里提问？正如您所说，您正在疯狂地更改全局结构默认值，并且您这样做的方式让我认为您不是前端开发方面的专家。如果您了解元素的呈现方式以及为什么它们具有这些默认属性，则没有理由像您一样覆盖。正如你所说，就像你想用记事本写一个诺贝尔奖，但试图在上面强制使用不同的字体样式和颜色。当您明确想要查看此内容时，请评论正文和 * 样式并回复此答案。

哦和...修改不透明度不要改变z-index。是的，它是一种你不能做某些事情的语言（不是真正的编程语言）。这就是使用 js 而不是 css 来执行某些特定工作的原因。我说的是我在前端开发和全栈开发方面 8 年的经验。至少你可以在你最后加载的 CSS 的底部添加这个：@media(max-width:991px;)bodyoverflow:visible; 然后，如果有什么东西让你的网站没有响应并且你滚动在 x-line 中，您的结构有错误。这叫调试或测试，TEST，不要偷懒！

使用 jquery 可以实现更快的加载和最简单清晰的脚本。如果它开发得很好，没有由于错误或结构使用不当引起的水平滚动，谷歌永远不会检测到错误。由于客户端设备上的加载时间和数据费用量，不推荐使用 js 来完成可以使用 HTML 和 CSS 完成的工作。由于您的网站统计数据不太好（62 个请求，超过 3MB 加载，410 毫秒开始加载，1.57 秒开始渲染，超过 6.3 秒满载）这对移动设备友好吗？我认为你必须改变你的方法，而不是试图愚弄谷歌机器人

我真的不想争论多年。您问了一些问题，我回答了可能的维修问题，而您正在讨论这些更改而没有进行测试。我在浪费我的时间处理你的问题，所以如果你不想听我的建议并且不太关心维修，我建议你将这篇文章标记为已完成但没有解决方案并将其标记为“由于固执”问的人”。干杯！