Some Webkit issues while developing a mobile website and how to fix them


Last month, I was helping my company Yellowpages with the launch of ProSelect, a program that aims to help consumers submit requests and choose qualified providers/contractors to handle their needs. I was working on the mobile website and found out a few issues/tricks that I would like to share in this post. Most of them are Webkit related issues, specifically mobile Safari and the default browser on Android (2x and 4x).

1. Things appear juddering, flashing in mobile Safari

Remedy: add -webkit-backface-visibility: hidden

2. Elements using ‘border-box’ box content make scrollbars appear when changing orientation of the device

Remedy: make sure the parent container have “overflow: hidden”

3. Returning a function value after calling “alert” causes mobile Safari to hang

Remedy: wrap the “alert” call in a setTimeout function. I was using 200 for the delay and it worked fine.

4. CSS3 -webkit-transform:rotate(x-deg) doesn’t work in Android 2x

Remedy: add a -webkit-transform: translate3d(0, 0, 0) to the parent element. Note, this issue occurred to me while I was testing in Galaxy S2 Note.

5. input[type=date] doesn’t work in the default Android browser (4x)

Remedy: unfortunately, at the time of this writing (April 2013) the implementation of input[type=date] is very inconsistent and buggy across all the browsers (mobile Safari, FF for Android, Chrome for Android, default Android browser etc). One way to fill the gaps and be consistent is to use a library like mobiscroll (mobiscroll.com)

6. Flashes and dark patches appear while scrolling a page in the default Android browser

Remedy: this issue happened to me while I was looking at a page that had a list of 120~ items, each of which is displayed in a box with some box-shadow applied. In the end I realized that limiting the list to 40~ items (about 3 pages) helped. Also removing the box-shadow reduced the repaint-chore for the browser and hence also helped (even though it might be against a particular design/styling interest)

7. The keyboard doesn’t go away and the cursor get stuck in textfields, textareas etc during form submission

Remedy: try document.activeElement.blur()

Advertisements