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

Safari (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.
  • If the dimension of an element being transformed exceeds 1024px in any dimension, flashing will occur as new areas are exposed within the view port (tile rendering).This can be reduced by placing translate3d() transforms on child elements that break what is being rendered into smaller pieces. This technique should be used with caution since this requires more 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.

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

Click Delay

Safari (iOS 3.x/4.x)

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.

Overflow Scroll/Hidden

Safari (iOS 3.x/4.x)

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.

Some examples:

• iScroll
• TouchScroll
• http://www.macresearch.org/dynamics-scrolling

Proprietary CSS Properties

• -webkit-touch-callout

  • On iPhone OS, when you touch and hold a touch target such as a link, Safari displays a callout containing information about the link. You may need to use this proprietary CSS property to disable that behavior. The current allowable values are none and inherit.

• -webkit-text-size-adjust: none;

  • Prevents webkit from resizing text to fit.

• -webkit-tap-highlight-color: rgba(0,0,0,0);

  • On iPhone OS, when you click on an element that has an onclick handler on it, the OS will draw a hilighted box over the element while you have your finger down. Setting the alpha of the -webkit-tap-hilight-color property to zero makes this hilighted box invisible.

• -webkit-user-select: none;

  • Prevents selection of content. Valid values include 'none' and 'text' */