Mobile Safari does not show rotateX CSS conversion and rotateY only rotateZ

Question

This is strange. I play with device orientation, but I can not get rotateX and rotateY to work in Safari (iOS 8.0.2).

But! if I save it on my home screen using the meta tag with apple-web-app support, it works fine.

This is my 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)"; } }); 

you can see it live here (on your iPhone): http://kohlin.net/matte/orientation.html Then try to save it on the main screen.

Any clues? Bug?

Answer 1

This is a bug in the ios browser browser. To fix this, surround the div field with another tag. Then move css:

 -webkit-perspective: 500px; 

to the containing div. This should make the rotary box visible.