JS / overflow:iPad / iOS上的Safari中隐藏的性能问题

时间:2010-09-14 18:51:47

标签: jquery performance ipad safari ios

我正在开发类似谷歌地图的滚动/平移系统。该系统应该比“原始”(没有缩放)简单得多,因此以非常直接的方式构建:

  • 有一个包含div的代表视口,溢出设置为隐藏且固定大小
  • 此div包含另一个基于鼠标移动平移的div
  • 根据可见区域,将固定的div(或imgs)添加到平移div以显示非常大的图像的部分

此设置正常运行。特别是在台式机上的常规浏览器中,它完美无瑕。滚动很流畅。

虽然在iPad上没有那么多:整个事情感觉非常缓慢。在平移时有一个明显的滞后时间,点击注册需要很长时间。

为了让它首先使用触摸界面,我必须将触摸事件“转换”为鼠标事件。虽然没有这个很难测试性能上的差异,但我认为这不是问题的原因,因为简单点击的响应性在停用时仍然保持同样低。

我试着通过简单了解一下谷歌地图本身(它在iPad上和其他任何地方一样好用)来弄清楚造成这种情况的原因,但无济于事(简直太复杂了)一个快速的想法)。所以我认为它可能与移动Safari在容器中设置为“溢出:隐藏;”,某些缓存问题或者我不知道的所需JS技巧的方式有关。

有什么想法我可以开始寻找吗?

1 个答案:

答案 0 :(得分:3)

溢出可能是性能问题。你应该试试z-index。

考虑放置5个div(如底部,左侧,中间,右侧和顶部)

将中心的z-index设置为1,将其他人设置为2 所以,它会像溢出一样工作:分配隐藏属性。

请不要那样;你应该为具有z-index 2的div提供背景颜色,以保持溢出区域不受中心div的影响。

希望它有效!