Mobile Safari nicht zeigen CSS-Transformation rotateX und rotateY nur rotateZ

Question

Dies ist seltsam. Ich spiele mit der Geräteausrichtung, kann aber anscheinend nicht routeX und rotaryY verwenden, um in Safari (iOS 8.0.2) zu funktionieren.

Aber! Wenn ich es mit Apple-Web-App-fähigen Meta-Tag auf meinem Home-Bildschirm speichern, funktioniert es gut.

Das ist mein Skript:

$(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)"; 
} 
}); 

Sie es sehen können hier leben (auf dem iPhone): http://kohlin.net/matte/orientation.html Dann versuchen Sie es zu Ihrem Home-Bildschirm zu speichern.

Irgendwelche Hinweise? Ein Käfer?

Answer 1

Dies ist ein Fehler im Safari Browser von ios. Um dies zu beheben, umgeben Sie die Box div mit einem anderen Tag. Dann verschieben Sie die css:

auf die enthaltene Div. Dies sollte die rotierende Box sichtbar machen.