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

css, google-chrome, transform

Solution

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.

Problem

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...)

Original source