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

Lun*_*kon 7 safari performance jquery ipad ios

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

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

这个设置正如它应该的那样工作.特别是在桌面上的常规浏览器中,它完美无瑕.滚动是流动的.

在iPad上并没有那么多:这里整个事情感觉非常缓慢.在平移时有明显的滞后现象,点击注册需要很长时间.

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

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

知道我在哪里可以开始寻找吗?

小智 3

溢出可能会导致性能问题。你应该尝试z-index。

考虑 5 个 div 的放置方式(底部、左侧、中心、右侧和顶部)

将中心的 z-index 设置为 1,将其他设置为 2,这样,它将像分配的 Overflow:hidden 属性一样工作。

请不要那样;您应该为 z-index 2 的 div 指定背景颜色,以保持溢出区域对中心 div 隐藏。

希望它有效!