Safari mobile non mostra CSS trasforma ruotareX e ruotareY solo ruotareZ

Question

Questo è strano. Sto giocando con l'orientamento del dispositivo ma non riesco a ruotare X e ruotareY per funzionare in Safari (iOS 8.0.2).

Ma! se lo salva nella schermata iniziale con il meta tag abilitato per apple-web-app funziona correttamente.

Questo è il mio script:

$(document).ready(function() { 
window.addEventListener("deviceorientation", handleOrientation, true); 

function handleOrientation(e) { 
    var alpha = e.alpha; 
    var beta  = e.beta; 
    var gamma = e.gamma; 
    $('#z').val(Math.round(alpha)); // Z 
    $('#x').val(Math.round(beta)); // X 
    $('#y').val(Math.round(gamma)); // Y 
    document.getElementById("box").style.webkitTransform="rotateZ("+Math.round(-alpha)+"deg) rotateX("+Math.round(beta)+"deg) rotateY("+Math.round(-gamma)+"deg)"; 
} 
}); 

potete vederlo qui dal vivo (su iPhone): http://kohlin.net/matte/orientation.html Poi prova a salvarlo alla schermata Home.

Eventuali indizi? Un insetto?

Answer 1

Questo è un bug nel browser ios Safari. Per risolvere questo problema, racchiudi il div box con un altro tag. Quindi sposta il css:

-webkit-perspective: 500px; 

al div di contenimento. Questo dovrebbe rendere visibile la scatola rotante.