在Safari 9.1.2上返回导航后禁用滚动

Question

首先，很抱歉我没有一个“最小、可验证”的测试用例。这个问题发生在Safari上，但我没有任何苹果产品。

在这个网站上，存在一个bug，导致用户在“返回”后无法再滚动页面。您可以跟随该链接，单击其中一个按钮，然后返回（通过滑动、单击按钮或使用快捷键），接着您将无法使用触摸板或鼠标滚轮滚动页面。我对可能导致这种情况的原因一无所知。

报告此问题的用户正在使用 Safari 9.1.2

- Gust van de Wal

---

只是确认一下：我可以在我的rMBP 15英寸（2015年中期，OS X 10.11.6）上使用Safari 9.1.2重现这个问题。我花了将近一个小时的时间查找，但找不到任何导致这个问题的原因。 - BlueCola

（我没有Safari 9.1.2，无法测试。）在返回后检查一下检查器中CSS body属性是否发生变化了？ 在stylesheet.css的第38行中有body {overflow-x: hidden;}。尝试去掉它，或是其他body属性，看看是否有帮助。这可能是一个已在Safari 9.1.3中修复的bug。我在Safari 9.0.x中也无法再现此问题。 - eye-wonder

我无法在Safari 6-9中重现该问题。 - norcal johnny

Answer 1

简而言之：

我认为答案是：你的网站代码没有问题。

事实上，我认为这与硬件有关，这就是为什么许多人无法重现此问题，它只影响某些用户。

我已经在从Lion/Safari 6到El Capitan/Safari 9的每个操作系统上进行了测试，使用了我的Mac和Browserstack来测试轨迹板和魔术鼠标。

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

正如您所述，触摸板受到影响，我想补充说明任何2个手指滑动可能是确切的原因，而1个手指滑动则不会。

而我说它与硬件有关的原因是：因为苹果论坛上的用户抱怨这个同样的问题，并且已经说PRAM重置是解决问题的方法。

更多的苹果论坛用户表达了他们的抱怨。

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

- norcal johnny

---

我很高兴！我们从你的问题中都获得了知识——干杯 - norcal johnny

Answer 2

我不能测试它，因为我没有OSX，但是在开发任何网站时，我从未遇到过这个问题。尽量不要依赖于body的overflow属性，让它自动适应。 如果某些内容在X轴上溢出，则表示你的结构或样式有问题（如果涉及响应式Web开发）。 如果某些内容在Y轴上溢出，则无论如何都可以滚动，即使你没有在body的样式中声明它。

然后，你把box-sizing: border-box;和position: relative;声明给所有元素（*，*: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.

希望它能帮到你，干杯！

- JoelBonetR

---

我经常误解为什么需要使用overflow:hidden。因为overflow的文档说（溢出被剪切，其余内容将不可见）。而且经验表明，它可能导致内容无法滚动。如果需要，Overflow auto会带来滚动条，而Overflow scroll会使滚动条出现，有时甚至没有必要。如果您使用这个已经很长时间了，那么没关系，但这是错误的。无论如何，如果您开始使用Bootstrap而不是自己编写代码，那么一切都可能很好。尝试执行步骤1和2，看看会发生什么。 - JoelBonetR

如果你不想尝试一些可能的网站修复工作，那你为什么要在这里问呢？就像你所说的，你疯狂地改变全局结构默认值，而你所做的方式让我觉得你不是前端开发专家。如果你理解元素的渲染方式以及它们为什么具有这些默认属性，就没有理由像你所做的那样覆盖它们。就像你所说的，这就像是你想用记事本写一篇诺贝尔奖获奖论文，但又试图强制使用不同的字体和颜色。当你确实想查看这个问题时，请查看评论正文和*样式，并回复此答案。 - JoelBonetR

哦，另外... 要修改不透明度，请不要改变z-index。是的，这是一种语言（其实并不是一种编程语言），您不能做某些事情。这就是使用js而不是css执行某些特定工作的原因。我从我的8年前端开发和全栈开发经验中谈论。至少你可以在最后加载的CSS底部添加这个：@media(max-width:991px;){body{overflow:visible;}}然后，如果有什么东西使您的网站不响应并且您在x轴上滚动，那么您的结构中就会出现错误。这被称为调试或测试，测试，不要懒惰！ - JoelBonetR

使用jQuery可以实现更快的加载和最简单、清晰的脚本。如果它被良好开发，没有由于错误或不良结构使用导致的水平滚动，谷歌将永远不会检测到错误。使用JS来完成可以使用HTML和CSS完成的工作已经过时，因为它会增加客户端设备的加载时间和数据费用。由于您的网站统计数据不太好（62个请求，超过3MB的加载量，410ms开始加载，1.57秒开始渲染以及超过6.3秒的完全加载时间），这是移动友好的吗？我认为你必须改变你的方法，而不是试图愚弄谷歌机器人。 - JoelBonetR

我真的不想争论多年。你问了什么，我回答了可能的修复方法，但你在没有测试的情况下讨论这些更改。我在处理你的问题上浪费了时间，所以如果你不想听我的建议，也不太关心我建议的修复方法，那么请将此帖标记为已完成但无解决方案，并标记为“由于提问者的固执”。干杯！ - JoelBonetR