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