JS / overflow: hidden performance issues in Safari on iPad / iOS

Question

I am working on a scroll / pan system on Google Maps. It is assumed that the system is much simpler than the "original" (without scaling), and as such is built quite straightforwardly:

• There is a containing div representing a viewport with overflow set to hidden and fixed size
• This div contains another div that moves around based on mouse movement.
• Depending on the visible area, fixed divs (or imgs) are added to the pan panel to display parts of a very large image.

This setting works as it should. Especially in regular desktop browsers, it works flawlessly. Scrolling fluid.

Not much on the iPad: that’s all it looks very sluggish. When panning, there is a noticeable lag, and it takes a lot of time to register clicks.

To make it work with touch interfaces, first of all I had to "translate" touch events to mouse events. Although it is difficult to check the difference in performance without this, I believe that this is not the cause of the problem, because responsiveness with simple presses remains equally low when it is deactivated.

I tried to figure out what could be the cause of this by doing a brief overview of Google Maps itself (which works just as well on the iPad as elsewhere), but to no avail (it's just too hard to get a quick idea). So, in the end, I think this could be due to the way Safari mobile passes divs to a container set to "overflow: hidden", some caching problems or required JS tricks that I don’t know about.

Any idea where I could start looking?

Answer 1

overflow can be a performance issue. You should try z-index.

think of 5 divs arranged as (bottom, left, center, right and top)

set the z-index center to 1 and others to 2 so it will work as an overflow: a hidden property.

please not so; you must specify the background color for the div with z-index 2 to keep the overflow areas hidden from the center of the div.

Hope it works!