Gotchas/bugs in development for WebKit on iOS or Android

Question

I'm about to develop a major touch-enabled mobile WebKit application.

I'm looking for any hints or advices about things that differ from a standard desktop-based browser(s).

For example:

• on iOS click events do not propagate upward to the body element over elements, except for some cases (links, inputs, elements with attached events, etc.).

• Android WebKit does not emit events for multi-touch.

I know about these. Are there some other problems? Do you know about some list of known problems?

Answer 1

I've found a few things out in my recent endeavors with the iPad.

1: Version 4.2 iOS has a bug where running too many document.getElementById('foo'); will cause the browser to lag, and thus not execute commands correctly. To remedy this you need to create variables to hold this information and only make the selection commands when needed. Version 4.3 of the iOS does fix this though, as I've tested it on my iPad.

2: When working with positioning, I have found that when creating your own video controller (for html5), if you try and resize the video container by using position: relative or position:absolute, you no longer will see a video, but a nice black screen (with sound!). In order to remedy this, simply target the parent frame and you're good to go.

3: If you're using iScroll be sure to put a timeout on having it load; especially if you have a few other javascripts on the page as even though the document has it loading when 'the page is loaded' via:

// Load iScroll when DOM content is ready.
document.addEventListener('DOMContentLoaded', loaded, false);

I've had this fail, and couldn't figure out for the life of me why my div wasn't sizing correctly showing me all elements but the last two and not scrolling. Instead I simply did a

$(function(){
   //other page loaded items to do
   //the iScroller init
   setTimeout('iScrollerInit();',200);
});

and it fixed the problem very quickly.

4: If you find your clicks aren't quite working correctly, I've found that many of the mobile SDK's out there are binding items on everything, making it difficult to achieve clicks to things normally you want. So to fix this you can do something like:

$("#yourId").unbind("click").click(function(){ 
    //what to do when clicked
});

and I've found this to work most brilliantly.

**UPDATE - Nov 2012 **: It's been a few years, and there is so much more to add to this so wanted to update the list a bit.

5: Javascript is expensive on a handful of devices STILL (December 2012). Doing things that manipulate the DOM generate a good deal of lag on devices and you should be really careful when doing these things. You'll want to make sure to test your Mobile Web pages in both Android older devices and iPhone older devices as from our metrics these are still well used devices.

6: If you are passing HTML to load in a web-view on a device (iPhone App or Android App) there are times when you will see almost a height 0. What you need to do is have your iPhone or Android app make a Javascript call on the actual page targeting a div to check the page offsetHeight which will then allow the webview height to be accurately set.

**UPDATE - Dec 2012 **: Few more awesome findings

7: I've found that when you target your divs for click events that mobile browsers will wait 300ms before firing the event, effectively creating a lag. They do this to confirm the click wasn't a double tap. in order to avoid this you can bind touchend events instead which will fire instantly!

Here's a bit of code

$(document).ready(function() {
    $('#element').bind('touchstart', function(event) {
        event.stopPropagation();
        event.preventDefault();
        $(this).toggleClass('hover_heading');
    });

    $('#element').bind('touchend', function(event) {
        event.preventDefault();
        $(this).toggleClass('hover_heading');
    });
});

Then once you see blinking happening over your items use this to remove that.

body * {
    -webkit-tap-highlight-color: rgba(0,0,0,0);  
}

Also if you want to check out an outstanding article google wrote on this you can view it here: - Creating Fast Buttons for Mobile Web Applications

**UPDATE - Feb 2013 **: Few more awesome findings

8 : When versioning your CSS files and caching them with urls such as: mydomain.com/css/styles.css?v=123 (or something else), be careful on android 2.2 devices and earlier as this forces extremely strange behavior.

From my findings android will render this completely wrong, and force the html to even be messed up. THe best way when working with these older devices is sadly to change the actual file name.

Hopefully these findings help others as I've struggled through each of these problems for multiple hours scratching my head :)

Answer 2

I don't know of a compiled list, but I can list a few:

• SVG is not supported (currently) in Android, as it's been turned off. Support is coming in Honeycomb. In contrast, iOS has left the SVG support enabled and it seems to work nicely.
• While both browsers support CSS3 opacity, make sure you thoroughly test any animations as they can be quite choppy for more complex graphics (especially with multiple layers of opacity.)
• In my javascript, I typically listen for the "touchstart", "touchmove", or "touchend" events for the sake of speed (the "click" event typically elicits a noticeable lag) and granularity.
• HTML5 features such as localStorage and the new audio and video tags seem to work well. However, on the iphone you can't autoplay audio or video, as the play event (and corresponding download) must be directly triggered by the user.
• Transitions involving movement (changing x and y coordinates) are quite smooth. In contrast, transitions involving opacity can be quite choppy depending on the resources involved (sometimes you might have to use a sprite to get a smoother feel.)

Just some quick observations.

Answer 3

I recently wrote a blog post about some of the cotchas with using an html5 framework - in my case Sencha Touch to build a native app wrapped in PhoneGap.

http://www.moneytoolkit.com/2011/05/the-problem-with-sencha-touch-and-phonegap/

Answer 4

3D webkit in android is broken, especially when it comes to anything related to input fields.

http://code.google.com/p/android/issues/detail?id=13048

There's been a few occasions where I've been trying to track down random CSS behaviour and it eventually comes down to -webkit-transform:translate3d(0,0,0); in a higher element (to enable hardware acceleration in iOS devices) throwing everything off.

Answer 5

Blockquote on iOS click events do not propagate upward to the body element over elements, except for some cases (links, inputs, elements with attached events, etc.)

This helped me enourmously -- thanks.

One UX item that has come up in user testing of our web app is that the iOS interaction for select elements is lousy. It requires 3 clicks: 1) click selector element, 2) click item you want to select, 3) click Done. And there is no event that I could find that is fired when you click Done. So, for short lists, it may be better to create your own popup menu or other interaction.

Answer 6

overflow: scroll isn't supported on android 2.3

you have to manually make your divs scroll (touchmove + scrollTop change) if they're in containers

there is a nasty bug where select boxes on Android 2.3 won't activate if they, or their container, has been hidden at any point

http://code.google.com/p/android/issues/detail?id=10280

Answer 7

position: fixed doesn't work.

The mobile section of QuirksMode will probably come in very handy.

Answer 8

Well, there is a annoying bug in Android where setting the caret or selection with Javascript has no actual effect on where the input happens.
I asked a question about it and the conclusion was that it was a browser bug :(, it happens in 2.2 and 2.3.

Focus textarea with caret after text in Android browser

Answer 9

Two "features" I've run into:

1. Input boxes do not respond to touch events (ontouchstart, ontouchmove, ontouchcancel), which also means ontouchmove="event.preventDefault()" will not prevent page scroll if you're creating a fixed-page, non-scrollable app. (It's possible to create a klunky workaround using hidden divs.)

2. It is impossible to use autofocus or element.focus() on any form field in WebKit, either on Android or iOS. The element will receive a cursor, but the keyboard will not appear. I'm still trying to construct a workaround for this, but for the moment it is a known, intentional limitation. :(