iOS上的Safari中隐藏的性能问题

2018-05-29 22:30:52

我正在研究类似谷歌地图的滚动/平移系统。该系统应该比“原始”（无缩放）简单得多，因此该系统以非常直接的方式构建：

有一个包含div的代表视口的溢出设置为隐藏和固定大小

这个div包含另一个基于鼠标移动的div

根据可见区域，固定div（或imgs）被添加到平移div以显示非常大图像的一部分

这个设置按照它应该的方式工作。特别是在桌面上的常规浏览器中，它的工作原理完美无瑕。滚动是流畅的。

尽管如此，iPad上并没有这么多：这里整个事情感觉非常缓慢。在平移时显然会有明显的滞后，并且点击需要很长时间才能注册。

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

我试图通过简单了解一下Google地图本身（它在iPad上的工作方式与其他地方的工作方式一样）来找出造成这种情况的原因，但无济于事（太复杂以至于无法获得快速的想法）。因此，毕竟我认为这可能与移动Safari浏览器在容器中设置为“溢出：隐藏”的方式有关，还有一些缓存问题或我不知道的JS技巧。

任何想法，我可以开始寻找？

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

考虑一下放置的5个div（底部，左边，中间，右边和顶部）

将中心的z-index设置为1，将其他设置为2，则它将像溢出一样工作：分配隐藏属性。

请不要那样; 你应该为z-index 2的div设置一个背景色，以防止溢出区域隐藏在中心div上。

希望它有效！

链接地址: http://www.djcxy.com/p/2807.html