Mobile Safari not showing CSS transform rotateX and rotateY only rotateZ

Question

This is weird. I'm playing with device orientation but can't seem to get rotateX and rotateY to work in Safari (iOS 8.0.2).

But! if I save it to my home screen with apple-web-app-capable meta tag 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 here live (on your iPhone): http://kohlin.net/matte/orientation.html Then try saving it to your home screen.

Any clues? A bug?

Answer 1

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

-webkit-perspective: 500px;

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