The Funky Side of Webkit on iPod Touch

by Michael

Here are some things that I noticed that make developing webapps a bit of a pain for webkit on iPod Touch. At this stage I’d like to mention that these problems occurred on a 2nd generation iPod Touch. The 3rd generation iPod Touch has a much more mature variation of webkit. Granted webkit (or Safari, whichever name you prefer) has functionality that goes way above and beyond what you would normally expect from a mobile based web browser – but there are aspects that remind me of what it can be like to develop for a browser that sometimes behaves in unexpected ways.

css position: fixed doesn’t work. instead you have to use a work-around.

css overflow: has lacking support meaning scrollbars do not appear when they are supposed to.

innerHTML is strict which can be a bit of a double edged sword. Strict is good because it ensures that whatever you end up injecting is valid, at the same time, it makes it harder to cache something that you would like to inject later (like table elements).

This property is usually the cause of NO_MODIFICATION_ALLOWED_ERR: DOM Exception 7. Check if all XML tags are closed, that child elements are within their correct parent elements and the proper use of HTML entities.

innerHTML mangles ampersand (&). This happens when I use XHR to load a remote document that contains links with a query string and try to inject it using the innerHTML property.

A work-around is to use a different separator, like pipe “|”. This also entails parsing the URL before it is processed by the service to convert | to & by using server-side filters for example.

Provides only a portion of a document for viewing. When scrolling through a long list, you’ll notice that ‘dead space’ can appear before a portion is loaded into view. This can lead to JavaScript problems when functionality is linked to markup (like this for example).

Graphical glitches can occur. This is probably linked to the overflow issue since I have a div with overflow hidden containing other divs with background images that are moved around (and outside) the container div. The images then break out from the container and intertwine with other elements on the page.