5

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

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

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

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

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

  • 向下滚动时它在 iPhone 5 Safari 上的外观（没问题）：图片
  • 向下滚动时它在 iPhone 4 Safari 上的外观（问题）：图片
4

2 回答 2

2

我冒昧地猜测您在 Mobile Safari 中暴露了一个布局怪癖，因为您隐藏/显示每个.company元素的内容的方式。每次更改display元素的属性时，浏览器都必须执行重排。回流（也称为布局）在功率较低的移动设备上成本过高。这可能可以解释为什么您只在 iPhone 4 上看到此问题。

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

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

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

于 2013-09-07T16:47:05.403 回答
1

在使用 Safari 6 远程调试功能玩弄了您的实时站点之后，我找到了一个适合我的解决方案。

添加-webkit-overflow-scrolling: touch;到.container元素（元素的子#companies元素）。

在考虑了更多之后，我记得滚动使内容随机消失并调整溢出滚动属性为我修复了它的问题。

于 2013-09-09T16:12:10.060 回答