iphone - iPhone 4 Safari 上奇怪的水平空白

Question

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

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

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

有没有人听说过这样的现象？我完全不知道是什么原因导致此行为或如何解决它。

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

• 向下滚动时它在 iPhone 5 Safari 上的外观(没有问题):Image
• 向下滚动时它在 iPhone 4 Safari 上的外观(问题):Image

Answer 1

由于您隐藏/显示每个 .company 元素内容的方式，我敢猜测您在 Mobile Safari 中暴露了一个布局怪癖。每次更改元素的 display 属性时，浏览器都必须执行重排。回流(也称为布局)在低功率移动设备上的费用高得令人望而却步。这可能可以解释为什么您只在 iPhone 4 上看到这个问题。

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

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

P.S.:iPhone 上的“其他”浏览器(即 Chrome 和 Opera)使用 UIWebview。 UIWebviews 使用修改版的 Nitro Javascript 引擎(Safari 版本启用了 JIT 编译)。这种细微差别或许可以解释为什么问题只能在 Safari 中重现。