iOS5なのにposition:fixed;が効かない時に確認すること

なんだかんだでFirefoxメインで制作しているわけですが、とあるページでposition:fixed;が効いてないみたいだよ?と@e_luckさんに教えてもらいまして、、、でちょっと調べてみて気づいたことです。

HTML5 Rocks - Improving the Performance of your HTML5 Appの「The magic CSS bullet」で紹介されていた下記のコードは、指定するとGPUアクセラレーションが有効になるのでパフォーマンス向上の恩恵を受けることができるかもしれない、といったような事が言われています(アニメーションの描画がスムーズになる?)。

GPUアクセラレーションを有効にするスタイル
-webkit-transform: translateZ(0);

ということで、これをbodyタグに指定してたんですが、、position:fixed;にならない原因はこのスタイルでした。これについてはW3CのWDに書いてありました。

The object acts as though position: relative has been specified, but also acts as a containing block for fixed positioned descendants.

CSS 3D Transforms Module Level 3

どおりでfixedを指定していた子孫要素が全部relativeの振る舞いになっちゃってたわけですね。

次のデモページでは親要素に-webkit-transform:translateZ(0);の指定がある場合とない場合の子要素の挙動を確認できます。WebKit系のブラウザでみてください。

デモページをみる

新しいプロパティを使うときは仕様書をちゃんと読んだほうが良さそうですね...。