jquery - JS/溢出 :hidden performance issues in Safari on iPad/iOS

Question

我正在研究类似 Google map 的滚动/平移系统。该系统应该比“原始”(无缩放)简单得多，因此以非常直接的方式构建:

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

此设置正在按预期工作。特别是在桌面上的常规浏览器中，它可以完美运行。滚动流畅。

虽然在 iPad 上不是那么多:在这里整个事情感觉非常缓慢。平移时有明显的延迟，点击需要很长时间才能被记录。

首先，为了让它与触摸界面一起工作，我必须将触摸事件“翻译”为鼠标事件。虽然没有这个很难测试性能差异，但我相信这不是问题的原因，因为在停用它时简单点击的响应速度仍然很低。

我试图通过简要查看 Google map 本身(它在 iPad 上和在其他任何地方都一样好用)来找出造成这种情况的可能原因，但无济于事(太复杂了，无法理解)一个快速的想法)。所以毕竟我认为这可能与移动 Safari 将容器中的 div 设置为“溢出:隐藏”的方式有关，一些缓存问题或我不知道的所需 JS 技巧。

知道我可以从哪里开始寻找吗？

Answer 1

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

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

设置center的z-index为1，其他为2因此，它将像分配的溢出:隐藏属性一样工作。

请不要这样；您应该为 z-index 为 2 的 div 提供背景颜色，以防止溢出区域隐藏在中心 div 之外。

希望它有用!