在多个设备上测试我的网站的移动版本时，我注意到一个非常奇怪的行为。
我有一个可滚动内容 divoverflow: auto，并且这在所有测试的设备上都能正常工作，除了 Safari 上的 iPhone 4。其他浏览器和设备可以正确显示它，甚至 iPhone 5 Safari。
在 iPhone 4 Safari 上，当您滚动到内容末尾时，底部会出现大量额外的空白（看起来像是 100-200% 的额外高度），并且滚动时文本会消失。在 Safari 中的任何其他设备上都不会发生这种情况，在 iPhone 4 上的其他浏览器中也不会发生这种情况。
以前有人听说过这样的现象吗？我完全不知道是什么原因导致这种行为或如何解决它。
由于我只能访问有限数量的设备进行测试，因此我可能会忽略也发生此问题的其他设备/浏览器。如果您有移动设备并且也想测试它，实时站点在这里：现场直播 http://www.csleisure.com。在移动主页上，单击其中一个徽标以展开内容，然后尝试向下滚动。请在评论中发布您的结果。
- 向下滚动时在 iPhone 5 Safari 上的显示效果（没问题）：Image http://imageshack.us/a/img208/669/33gd.png
- 向下滚动时在 iPhone 4 Safari 上的显示效果（问题）：Image http://imageshack.us/a/img542/1792/0lxe.png
我斗胆猜测您在 Mobile Safari 中暴露了布局怪癖，因为您隐藏/显示每个内容的方式.company元素。每次您更改display元素的属性，浏览器必须执行回流。对于低功耗移动设备来说，回流焊（也称为布局）的费用高得令人望而却步。这可能可以解释为什么您只在 iPhone 4 上看到该问题。
我自己在 iPhone 4 和 iPhone 3GS 上进行了测试，两者都运行 iOS 6.1.3，只有当我展开顶部或底部时，我才能重现该问题.company元素，但不是中间元素。或许这是因为中间.company元素包含的子元素较少，这意味着需要较少的布局计算。
而不是申请display: block; and display: none;给里面的每一个孩子.company元素，我强烈建议您简化 JavaScript，以切换单个容器元素上的显示属性。通过这样做，您可以强制浏览器仅执行一次回流计算，而不是针对您单独更改显示属性的每个元素。
P.S.：iPhone 上的“其他”浏览器（即 Chrome 和 Opera）使用 UIWebviews。 UIWebviews 使用 Nitro Javascript 引擎的修改版本（Safari 版本启用了 JIT 编译）。这种细微的差异可能可以解释为什么该问题只能在 Safari 中重现。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
