Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Browser Notes

Jump to bottom
jblas edited this page Sep 23, 2010 · 13 revisions

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.

  • 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.

    • 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.

Click Delay

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:

http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone

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.

Clone this wiki locally