The rules:
- Most of the browsers on Android (Chrome's good, but it's not available on anything less than 4.0) suck pretty hard, and you'll almost definitely have to do a few weird hacks to get everything to work well (read: at all, sometimes).
- Use transform-3d for any animations in browsers that support it. No JS required for detection – you can use media queries [3]. For browsers that don't support it, you can fall back to jQuery's animate method [4] or standard CSS transitions.
- Avoid using fixed positioning in your CSS unless it's absolutely (no pun intended) necessary. It's not well supported in many mobile browsers, and you might end up creating more work for yourself down the line (i.e., hacking for Android and older versions of iOS). If you can figure out how to use absolute positioning instead without completely fubaring your layout, do it.
- If you're using divs that don't move (i.e., fixed- or absolute- positioned ones), use -webkit-overflow-scrolling: touch; to enable inertial scrolling within them in iOS and other browsers that support it. If browsers don't support scrolling at all, you'll have to either implement your own scrolling solution from scratch or use one of the many decent ones available on the interwebs.
- Try the simplest solution you can think of first and go from there. Sometimes it'll work better than you'd expect.
1. http://callingvault.com 2. http://m.callingvault.com 3. @media all and (-webkit-transform-3d) {} 4. http://api.jquery.com/animate/