Chrome on Android not respecting z-index for link clicks

Question

HTML

<div class="container">

    <div class="child">
        <a href="http://www.google.com" target="_blank">Google</a>
    </div>
</div>
<a href="http://www.yahoo.com" target="_blank" class="y">Yahoo</a>

CSS

.container{position: relative;display: block;width: 100px;height: 30px;background: #000;z-index: 7;}
.child{position: absolute;width: 100px;height: 100px;background: #CCC;padding-top: 30px;z-index:9;top: -999px;}
.child a{display: block;}
.container:hover .child{display: block;top: 0;}
.y{z-index: 6;}

Working example : http://jsfiddle.net/DemjR/6/

I have created CSS hover menu on the above example (in link) and strangely its not working as it is suppose to in chrome (v 25.0.1364.123) in android devices. but it works properly in every other devices I tested in (ios, windows, mac etc..)

Problem is (in android): When you hover over the black box a grey coloured div appears which has a link (google.com) in it.

When you click on that link it actually triggers the link behind (yahoo.com) and not (google.com)

Is this a chrome bug in android devices?

Thanks in advance

Answer 1

This appears to be a bug in M25 of Chrome on Android, I have raised an issue with the eng team. Follow https://code.google.com/p/chromium/issues/detail?id=180194

Answer 2

Chrome, in this case is kind of triggering the mouseOUT before the click!

Here is another fiddle that shows HOVER events on DIVs as well as click events on LINKS:

http://fiddle.jshell.net/gnv9n/18/ <-- this should work on all browser. Only webkit transition is used because your issue happens on Chrome only.

If you add a css3 transition, the click is triggered correctly! This is kind of an ugly fix but it works.

Try to remove the css transition and look at the events if you want to see Chrome failling to click before "hovering"

Thanks Kinlan for submitting the issue to Chrome's team!