だぶだぶノート

だぶチルトのゲームがSafari6で動かなくなっているわけですが、
どうやらSafari6で、3D関連のCSSが動かなくなった模様。

https://twitter.com/openspc/status/230114570373566465?uid=59377436&iid=am-133564127713436985638109830&nid=27+232
openspcの古籏さんにちょっと聞いてみたのですが、動く場合もあるとの事。

これについて、ちょっと調べてみました。

—-動作しない例—-


<style>
#container {
position: absolute;
top: 83px;
left: 0px;
height: 100px;
width: 200px;
/* -webkit-transform-style: preserve-3d;*/
-webkit-perspective: 480;
-webkit-transform: rotateY(180deg);
}
</style>
<div id="container">
<p>あいうえお</p>
</div>


なにか、perspectiveを指定したものと、transformを指定したものが同じものの場合は、要素が消えるらしいです。

—-動作する例—-


<style>
#container {
position: absolute;
top: 83px;
left: 0px;
height: 100px;
width: 200px;
/* -webkit-transform-style: preserve-3d;*/
-webkit-perspective: 480;
}
#container p{
-webkit-transform: rotateY(180deg);
}
</style>
<div id="container">
<p>あいうえお</p>
</div>


なお、transform-style:preserve-3d;を指定すると、要素が消えるようです。