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

Question

I am working on a Google Maps-like scrolling/panning system. The system is supposed to be a lot simpler than the "original" (no zooming) and as such is built in a quite straight forward fashion:

• There is a containing div representing the viewport with overflow set to hidden and a fixed size
• This div contains another div that's being panned around based on mouse-movement
• Depending on the visible area fixed divs (or imgs) are added to the panning div to display parts of a very large image

This setup is working as it's supposed to. Especially in regular browsers on desktops it works flawless. The scrolling is fluid.

Not so much on the iPad though: Here the whole thing feels very sluggish. There is a clearly noticeable lag when panning around and it takes very long for clicks to be registered.

To get it working with touch interfaces in the first place I had to "translate" touch events to mouse events. Although it's hard to test the difference in performance without this, I believe that it is not the cause of the issue because the responsiveness on simple clicks remains equally low when deactivating it.

I tried to figure out what might be the causes for this by taking a brief look at Google Maps itself (which works just as well on the iPad as it does anywhere else), but to no avail (simply too complex to get a quick idea). So after all I think it might have something to do with the way mobile Safari handels the divs in a container set to "overflow: hidden;", some caching issues or required JS-tricks I'm not aware of.

Any idea where I could start looking?

Answer 1

overflow might be a problem for performance. You should try z-index.

think about a 5 divs placed like( bottom , left, center, right and top)

set center's z-index to 1 and others to 2 so, it will work like an overflow:hidden property assigned.

please not that; you should give a background color for the divs with z-index 2 to keep overflow areas hidden from the center div.

Hope it works!