在多个设备上测试我网站的移动版本时，我注意到一种非常奇怪的行为。
我有一个带有overflow: auto的可滚动内容div，这适用于所有经过测试的设备，但Safari上的iPhone 4除外。其他浏览器和设备也能正确显示，甚至是iPhone 5 Safari。
在iPhone 4 Safari上，当您滚动到内容的末尾时，底部会出现很多额外的空白（看起来像100-200％的额外高度），滚动时文本会消失。这不会发生在Safari中的任何其他设备上，也不会发生在iPhone 4上的其他浏览器中。
以前有没有人听说过这种现象？我完全不知道导致这种行为的原因或解决方法。
由于我只能访问有限数量的设备进行测试，因此我可能会忽略发生此问题的其他设备/浏览器。 如果您有移动设备并且想要对其进行测试，则实时网站位于：Live site。在移动主页上，单击其中一个徽标以展开内容，然后尝试向下滚动。请在评论中发布您的结果。
答案 0 :(得分：2)
我冒昧地猜测你在Mobile Safari中暴露了一个布局怪癖，因为你隐藏/显示每个.company元素的内容的方式。每次更改元素的display属性时，浏览器都必须执行重排。回流（也称为布局）在低功率移动设备上花费巨大。这可能解释了为什么你只是在iPhone 4上看到这个问题。
我自己在运行iOS 6.1.3的iPhone 4和iPhone 3GS上进行了测试，只有当我扩展顶部或底部.company元素而不是中间元素时，才能重现该问题。也许这是因为中间.company元素包含的子节点越少，意味着需要更少的布局计算。
我强烈建议您简化您的javascript以改为在单个容器元素上切换显示属性，而不是将display: block;和display: none;应用于.company元素中的每个子元素。通过执行此操作，您强制浏览器仅执行一次回流计算，而不是针对您单独更改显示属性的每个元素。
P.S。：iPhone上的“其他”浏览器（即Chrome和Opera）使用UIWebviews。 UIWebviews使用Nitro Javascript引擎的修改版本（Safari版本启用了JIT编译）。这种微妙的差异可以解释为什么这个问题只能在Safari中重现。
答案 1 :(得分：1)
使用Safari 6远程调试功能稍微使用您的实时网站后，我发现了一个适合我的解决方案。
将-webkit-overflow-scrolling: touch;添加到.container元素（您的#companies元素的子元素）。
在考虑了一些之后，我记得滚动制作内容随机消失的问题，并调整溢出滚动属性为我修复了它。
