Mobile Mysteries

WARNING: Work in progress.

This post intends to summarize some of the mobile-specific bugs or quirks I've come across while working as a consultant on projects in Norway. It will be a live document, meaning that I'll add stuff as they come along.

Sibling selector on Android 2.3.3 / HTC Desire

The general sibling selector (~) simply doesn't function on old Androids. Learned this one last day of the release and had to rewrite all the things. Well, one thing.

Reserved keyword names

Obviously, variables can't have names that are reserved keywords in javascript. E.g, you can't have any of this:

var if = "foo";
var delete = "bar";
var var = "baz";

However, object properties can:

var obj = {
    delete: 1,
    if: 'two',
    while: 'true'
};

Mind you that this doesn't mean you should go ahead and do this even though is syntactically legal. The drunken uncle arriving late and spoiling the party in this case is Uncle Legacy. Internet Explorer 7 and 8 and Windows Phone 7 will break javascript execution once you try to access one of these properties.

If you are absolutely determined to this, it may help accessing the properties using bracket syntax instead of dot syntax. Won't guarantee you safety tho, so use at your own risk.

var obj['delete']; // may work
var obj.delete; // bad

CSS Property Units on Mobile Safari

When using the position property of CSS along with any of { top | right | bottom | left }, some people tend to leave out the units and just put 0 as the value, like this:

position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;

Most modern browsers handle this very well, however, mobile Safari on iOS doesn't. Make sure you also specify a unit:

top: 0px;