Thursday, January 20, 2011

Android Browser Issues

Ran into a really frustrating issue with Android's Webkit browser today. I'm using jQuery Mobile in a project but have tweaked it quite a bit. The site works awesome on an iPhone. Android (2.2.1) not so much.

The symptoms:
1) Regular html select inputs where not opening up with the list of options.
2) Certain links and buttons had difficulty registering clicks.
3) One of my text boxes would get scrolled to the top of the page as soon as you started entering text.

The solution?
Make sure -webkit-backface-visibility is not set to hidden on any parent elements. The jQuery Mobile CSS has it set to hidden for the ui-page class. Overriding it for android by setting it to visible fixed all 3 of the above issues.

This took about 6 hours to solve.

Kill me now.