Chrome strange click behavior on underlying element
<p>I have the following HTML code. While the screen is covered by the "cover" DIV, click on the button and somewhere else. The click not on the button does not fire. Later when the "cover" DIV is hidden the click on the button fires.</p>

<p>It appears as if there is a timing issue. Can someone please explain this behavior?</p>

<p><strong>Markup:</strong></p>

<pre><code>&lt;div id="cover"&gt;&lt;/div&gt;
&lt;button onclick="alert('Button clicked')"&gt;Click me&lt;/button&gt;
&lt;div id="text"&gt;&lt;/div&gt;​
</code></pre>

<p><strong>CSS:</strong></p>

<pre><code>#cover {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: white;
    opacity: 0.8
}​
</code></pre>

<p><strong>Javascript:</strong></p>

<pre><code>function hide ()
{
    document.getElementById ("cover").style.display = "none";
}
function show ()
{
    document.getElementById ("cover").style.display = "block";
}
function busy (callback)
{
    show ();
    setTimeout (callback, 1);
}
function work ()
{
    var start = (new Date ()).getTime ();
    var wait  = 3000;
    while ((new Date()).getTime () - start &lt; wait)
    {
        /* do nothing */
    }
    hide ();
}
function start ()
{
    document.getElementById ("cover").onclick = function (ev) {
        document.getElementById ("text").innerHTML = 'Cover clicked';
    };
    busy (work);
}​
</code></pre>

<p><a href="http://jsfiddle.net/userdude/5DutW/4" rel="nofollow">http://jsfiddle.net/userdude/5DutW/4</a></p>
