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.

Bugs

• iPads (1st Generation) running iOS 3.2

  • Elements that have their positions animated via a translate() transition will flicker in the upper left corner of the browser window, even though they are located elsewhere on the page.
  • Elements that have been animated with a transform, such as translate, will flicker badly if anything inside them is animated via JS.
    • See this example.

• iDevices running iOS 3.x/4.x

  • Can't synchronize hardware accelerated and non-accelerated transitions.

    • Hardware accelerated transitions run on a different clock than non-hardware accelerated transitions so even they are both triggered at the same time and have the same duration, the hardware accelerated transition will finish before the non-accelerated transition.

  • A hardware accelerated transition for an element sometimes causes other elements, with hardware accelerated transitions, to go blank while it is animating.