Browser Notes

Overview

This page contains notes on the various problems, tips, and tricks that exist for the mobile platforms we are targeting.

Mobile WebKit

CSS3 Transitions and Hardware Acceleration

Browser: Safari

Operating System: Apple iOS 3.x/4.x

• You can make use of hardware accelerations on the iOS devices if you animate items via CSS3 Transitions.

• The only properties that trigger hardware acceleration are:

  • Opacity
  • Transform (2d and 3d translate, rotate, scale, skew)

• If you animate the opacity and 2d transform properties via JS, they are not hardware accelerated.

• If you use 3d transforms, hardware acceleration will be used, even if animated via JS.

  • We need to be careful with transform animations since the items being animated are cached in memory.