CSS 3D-cube ruota verso il lato, elementi padre erroneamente sopra la superficie quando ruota di 90 gradi, ma non quando 89.9 gradi

Question

In Chrome, sto provando a ruotare un cubo, ma dopo di che il lato improvvisamente non è intrattabile, e gli elementi genitore sembrano avere la precedenza. Tuttavia, quando creo quell'elemento pointer-events: none, il tag body è il primo elemento, quindi per qualche motivo dopo aver ruotato 90deg perde la sua interazione.

Tuttavia, quando ho ruotare solo 89.9deg, non c'è alcun problema e può interagire con gli elementi sul lato, ho trovato giocherellare con translateZ ma questo non aiutare.

Ho ricreato qui: http://jsfiddle.net/TrySpace/GxJLV/

E, in Firefox funziona benissimo ...

Chiunque abbia familiarità con questo bug/differenza e come risolvere il problema?

- Sembra che l'elemento contenitore che sto ruotando perda tutte le sue interazioni perché quell'elemento contenitore è una superficie piatta nell'ispettore, che contiene gli elementi 3d, quindi nessuna interazione su un piano che viene visualizzato dal lato ?

Aggiornamento: http://jsfiddle.net/TrySpace/GxJLV/2/ (89,9 gradi funziona ancora ...)

Answer 1

Siete essere colpiti da una combinazione di errori di arrotondamento e la gestione di Chrome di hit testing (esiste almeno http://crbug.com/126479 - che bug non è chiusa e la la patch di recente atterraggio non ha risolto il tuo caso AFAICT).

Per riferimento, ecco una versione semplificata del violino con html extra e css rimosso: http://jsfiddle.net/GxJLV/7/

Fix, alternativa 1

si specifica

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

ma se si controlla la calcolato stile in Strumenti per sviluppatori vedrai che diventa

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

Ciò comporta che il pulsante e il tasto di rotazione ruotino al di sotto del corpo nell'ordine 3d z. Se si sostituisce il rotate3d con

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

hit testing funziona (vedi http://jsfiddle.net/GxJLV/3/ contro originale, http://jsfiddle.net/GxJLV/10/ contro la versione semplificata).

Fix, alternativa 2

(Perchè questo funziona non mi è chiaro, ma other people are doing it as well.)

Situato (-webkit-)perspective sul genitore dell'elemento ruotato:

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

Vedi http://jsfiddle.net/GxJLV/4/ (originale, http://jsfiddle.net/GxJLV/8/ semplificato)

Ciò causerà qualche sfarfallio sul pulsante però.