Hover not reliable in a relative hierarchy using CSS rotation - css

Question

I'm trying to create a online card game, using pure HTML/CSS.
I created a relative hierarchy of objects and I want the user to interact with them.
Probleme is, with CSS rotations (transform: rotateX, transform-style: preserve-3d), hover is not reliable.
Here's a simplified version of what it looks like :
http://jsfiddle.net/qLg9u51e/1/
Here are the main elements :
.container {
transform: rotateX(50deg);
transform-style: preserve-3d;
}
.tile {
position: relative;
}
.object {
position: absolute;
background: orange;
}
.object:hover {
background: red
}
I am expecting the orange object to be red while the mouse is hovering it, but as you can see, that's not always the case. It's a weird behaviour and I do not fully understand it.
By removing either rotateX, preserve-3d or the relative property, the hover property works correctly, but I need these elements.
Why am I doing wrong here ? And if you don't know how to solve my problem, do you know why CSS is acting like this ?

Answer 1

It looks like the row was overlapping the object at some points (not all, which is a bit confusing!).
Adding .row { pointer-events: none; }and .object { pointer-events: all; } fixes the problem:
.master {
perspective: 500px;
width: 200px;
height: 100px;
}
.container {
transform: rotateX(50deg);
transform-style: preserve-3d;
}
.row {
width: 200px;
background: darkgray;
padding: 20px;
pointer-events: none;
}
.tile {
height: 150px;
width: 80px;
margin-left: 60px;
margin-right: 60px;
background: #505050;
position: relative;
}
.object {
position: absolute;
height: 140px;
width: 70px;
margin: 5px;
background: orange;
pointer-events: all;
}
.object:hover {
background: red;
}
<div class="master">
<div class="container">
<div class="row">
<div class="tile">
<div class="object"/>
</div>
</div>
</div>
</div>
It's not ideal since I can't quite pinpoint the root cause, but it works in the meantime!