Mobile Safari, CSS dönüşümünü döndürmüyor rotateX ve döndürmeYalnızca rotateZ

Question

Bu garip. Cihaz yönlendirmesiyle oynuyorum, ancak rotateX ve rotateY'nin Safari'de çalışması için görünmüyor (iOS 8.0.2).

Ama! Apple-web-app özellikli meta etiketi ile ana ekranıma kaydedersem iyi çalışıyor.

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

burada (iPhone'unuzdaki) canlı görebilirsiniz:

Bu benim senaryom http://kohlin.net/matte/orientation.html Ardından ana ekrana kaydetmeyi deneyin.

Herhangi bir ipucu? Bir böcek?

Answer 1

Bu, ios Safari tarayıcısında bir hatadır. Bunu düzeltmek için, kutu div'ini başka bir etiketle çevirin. Ardından, içeren div dosyasına css:

'u taşıyın. Bu dönen kutusu görünür yapmalıdır.