JS/overflow:hidden performance issues in Safari on iPad/iOS
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:
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?
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!
链接地址: http://www.djcxy.com/p/2808.html上一篇: 改变100GB表格的有效方法