CSS 3D-cube rotates to side, parent elements wrongly above surface when rotating 90deg, but not when 89.9deg

Question

In Chrome, I'm trying to rotate a cube, but after that the side suddenly is not intractable, and parent elements seem to take precedence. However, when I make that element pointer-events: none, the body tag is the first element, so for some reason after rotating 90deg it looses its interaction.

However, when I only rotate it 89.9deg, there's no problem and I can interact with the elements on the side, I tried fiddling with translateZ but that doesn't help.

I recreated it here: http://jsfiddle.net/TrySpace/GxJLV/

And, in firefox it works fine...

Anyone familiar with this bug/difference and how to fix it?

- It seems that the container element I'm rotating looses all its interactions because that container element is a flat surface in the inspector, which holds the 3d elements, thus no interactions on a plane that is viewed from the side?

Update: http://jsfiddle.net/TrySpace/GxJLV/2/ (89.9 degrees still works...)

Answer 1

You are getting hit by a combination of rounding errors and Chrome's handling of hit testing (there is at least http://crbug.com/126479 - that bug is not closed and the recently landed patch didn't fix your case AFAICT).

For reference, here's a simplified version of the fiddle with extra html and css removed: http://jsfiddle.net/GxJLV/7/

Fix, alternative 1

You are specifying

.show-right {
    -webkit-transform: rotate3d(0, 1, 0, -90deg);
    ...
}

but if you check the computed style in Developer Tools you'll see that it becoms

-webkit-transform: matrix3d(0.00000000000000006123233995736766, 0, 1, 0,
                            0, 1, 0, 0, -1,
                            0, 0.00000000000000006123233995736766, 0, 0, 0, 0, 1);

This results in the rotated div and button to be underneath the body in 3d z order. If you replace the rotate3d with

.show-right {
    -webkit-transform: matrix3d(0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 0, 1);
    ...
}

hit testing will work (see http://jsfiddle.net/GxJLV/3/ against original, http://jsfiddle.net/GxJLV/10/ against the simplified version).

Fix, alternative 2

(Why this works is not clear to me, but other people are doing it as well.)

Set (-webkit-)perspective on the parent of the rotated element:

.view {
    -webkit-perspective: 100000px;
}

See http://jsfiddle.net/GxJLV/4/ (original, http://jsfiddle.net/GxJLV/8/ simplified)

This will cause some flicker on the button though.