This page contains notes on the various problems, tips, and tricks that exist for the mobile platforms we are targeting.
The only properties that trigger hardware acceleration are:
If you animate the opacity and 2d transform properties via JS, they are not hardware accelerated.
iPads (1st Generation) running iOS 3.2
iDevices running iOS 3.x/4.x
Can't synchronize hardware accelerated and non-accelerated transitions.
Running a hardware accelerated transition for an element sometimes causes other elements, with hardware accelerated transitions and after it in the flow/document, to go blank while it is animating.
Transitions that trigger a layout, for example changing the height of something in the flow, can be very choppy on iPods and iPads. How bad it is really depends on the amount of content after the item transitioning.
Can't transition from a fixed width or height CSS property to "auto". The Transition code treats "auto" as zero so during the transition the width/height property will transition from the fixed size, down to zero, and then snap open to fit all of its content.
On iDevices, not sure of other mobile webkit implementations, there is a 300 ms pause between the time you tap on a link or element with an onClick handler, and the time the onClick event is actually dispatched. There is no delay experienced when tracking the touch events. Some folks have resorted to tracking touch events and then manually firing off click events in a timely manner:
But you may have to add a hack to disable the OS delayed onclick event that occurs after you've manually fired off an onclick event.
There are no interactive scrollbars on iDevices so elements with overflow:scroll on them appear to be clipped. Any attempts to scroll them via the normal single finger touch mechanism results in the entire page scrolling. The only way to scroll the content is to use a 2 finger swipe which scrolls the content inside the element. This scrolling seems very crude and does not implement the smooth momentum scrolling used by the main browser canvas and native scrolling panels.
Some developers have resorted to simulating the momentum scrolling via JS and in some cases with JS and CSS3 transitions. There are no implementations yet that simulate the scrolling panel hierarchy event handling that is demonstrated by nested native scrolling panels.