iPhone 4 Safari 上出现奇怪的水平空白

Question

在多个设备上测试我的网站的移动版本时，我注意到了一种非常奇怪的行为。

我有一个可滚动的内容div，使用overflow:auto，在所有测试设备上都正常工作，除了iPhone 4上的Safari。其他浏览器和设备都正确显示，甚至是iPhone 5 Safari。

在iPhone 4 Safari上，当您滚动到内容的末尾时，底部会出现很多额外的空白（看起来像100-200%的额外高度），并且在滚动时文本会消失。这在Safari的任何其他设备中都不会发生，iPhone 4上的其他浏览器也不会发生。

有人听说过这样的现象吗？我绝对不知道是什么原因导致了这种行为或如何修复它。

由于我只能访问有限数量的测试设备，可能忽略了其他设备/浏览器也存在此问题。如果您有移动设备并想进行测试，请访问此处的实时网站Live site。在移动主页上，单击其中一个标志以展开内容，然后尝试向下滚动。请在评论中发布您的结果。

• 当在 iPhone 5 的 Safari 中向下滚动时的外观（无问题）：图片
• 当在 iPhone 4 的 Safari 中向下滚动时的外观（有问题）：图片

- Praxis Ashelin

---

很难说——如果HTML/CSS中没有明显的问题，那么JavaScript就是需要检查的错误源。如果禁用/删除JS会发生什么？ - BurninLeo

@BurninLeo，那么我的内容就不会展开了。那些div上唯一应用的JS是slideDown();和CSS中的filter: none;。 - Praxis Ashelin

每个设备上的iOS版本是多少？ - Kerim Incedayi

@KerimIncedayi 最新版本为6.1.3。 - Praxis Ashelin

Answer 1

我猜测你正在暴露Mobile Safari中的布局问题，因为你正在隐藏/显示每个.company元素的内容。每次更改元素的display属性时，浏览器都必须执行一次回流。回流（也称为布局）在低功率移动设备上是非常昂贵的。这可能解释了为什么你只在iPhone 4上看到这个问题。

我自己在iPhone 4和iPhone 3GS上进行了测试，两者均运行iOS 6.1.3，只有在展开顶部或底部的.company元素时才能重现该问题，而中间的元素则不能。也许这是因为中间的.company元素包含较少的子元素，意味着需要较少的布局计算。

与其对.company元素中的每个子元素应用display: block;和display: none;，我强烈建议你简化你的javascript，改为在单个容器元素上切换显示属性。通过这样做，你只需强制浏览器执行一次回流计算，而不是针对每个单独更改显示属性的元素执行回流计算。

P.S.：iPhone上的“其他”浏览器（如Chrome和Opera）使用UIWebviews。UIWebviews使用修改过的Nitro Javascript引擎（Safari版本启用了JIT编译）。这种微小的差异可能解释了为什么只能在Safari中重现该问题。

- BigMacAttack

---

感谢您的调查。这个答案很有道理，但不幸的是它没有解决问题。它仍然完全一样。 - Praxis Ashelin

看起来这个答案和你的另一个答案的结合解决了问题！ - Praxis Ashelin

Answer 2

在使用Safari 6远程调试功能玩弄您的实时网站后，我找到了一个适合我的解决方案。将.container元素（即#companies元素的子元素）添加-webkit-overflow-scrolling: touch;。经过进一步思考，我想起滚动会导致内容随机消失的问题，并调整了overflow-scrolling属性来解决它。

- BigMacAttack