Question

In the following code, the onclick event never fires when using android browser:

<div id="__log"></div>
<div id="hud">
    <div>Hello</div>
    <div>
         <a style="border:1px solid #fff;" href="#" onclick="document.getElementById('__log').innerHTML = document.getElementById('__log').innerHTML + '<br />clicked'; return false;">Click Me</a
    </div>
</div>

Style:

#hud {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
padding: 10px;
background:transparent url('gray95op.png') repeat;
-webkit-transform: scale(1);
-webkit-transition: all 0.25s  ease-in-out;
position: fixed;
top:10px;
left:0;
right:0;
margin:0 auto;
width: 75%;
z-index: 1001;
color: #fff;
text-align:center;
}
#hud a { color: #ccc; z-index:1002;  }

This works fine in Safari on iPhone and Chrome on desktop.

Here is an example you can try for yourself on an Android device: http://kortina.net/android.html

Answer 1

I’m pretty sure that the Android browser doesn’t support fixed position. I don’t believe mobile safari on iphone did either, until they added support in iOS 5. (some people have recreated fixed position using javascript, i.e. http://daringfireball.net/2009/12/pastrykit — post ios 5 this will no longer be necessary)