[SOLVED] Android keyboard does not open when using media queries

Android keyboard does not open when using media queries

I have a mobile site that includes a search box at the bottom. I also use media queries to hide content in portrait mode and display it in landscape mode.

However in Android devices when I click on the search field the keyboard opens then immediately closes, making it impossible to type in the box.

This is not a problem in iOS.

The page can be viewed here - http://so.ajcw.com/android-keyboard.htm and here is the full page code:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
    <title>Erroring search field</title>

    <style>     
    .address { display: none; }

    @media only screen and (orientation: landscape) { 
        .address { display: block; }
    } 
    </style>

</head><body>

<h3>Venue 1</h3>
<p>Cuisine</p>
<p>Price</p>
<p>Rating</p>
<p class="address">Address</p>

<h3>Venue 2</h3>
<p>Cuisine</p>
<p>Price</p>
<p>Rating</p>
<p class="address">Address</p>

<form><input type="text"></form>

</body></html>

Thing's I've tried

If I have only one venue or if I move the search up the page the problem goes away (this isn't a solution, just an observation).
I have tried changing the DOCTYPE - an HTML5 doctype slightly changes the functionality in that the keyboard remains after the second click, but again it doesn't fix the issue.

*edit*

This does seem to be browser specific. An old Android phone does not have the problem, nor it seems does my Android's (HTC Desire) default browser, but it does happen in Dolphin HD.

Solution

Using Adam's research the issue is solved by avoiding using orientation. The solution that works for me is taken from this CSS3 'boilerplate', and uses min and max widths like so:

@media only screen and (max-width: 320px) {
   .address { display: none; }
}

@media only screen and (min-width: 321px) { 
    .address { display: block; }
}

However this solution is not ideal as using fixed dimensions will eventually break as devices resolutions change.