2014/08/13

Android 2.x~で拡大縮小も可能なままposition: fixedを使う方法

結論
cssのkeyframeアニメーションを使うとposition:fixedが有効になる

ちょっとはまってしまったのでメモ
スマートフォン向けのサイトで、facebookみたいに横から出てくるメニューを作った。
Androidf 2.x~はそのままではoverflow: scrollもposition:fixedも効かないので、スクロールしたらメニューもそのまま一緒にスクロールされるようにした…はずだった。

が、ある時からメニューがfixedになってしまて、スクロールしても動くのは横にずれていったメインのコンテンツ部分のみ。
メニューは定位置のまま。それだとウィンドウの外に出てしまったメニューを見ることができない。

viewportにuser-scalable=noと入れるとposition: fixedが効くようになるという話だったが、そんな指定はしていない。

原因を探してみると、どうやらkeyframesアニメーションを使うと、position: fixedが効くようになるらしい。
拡大縮小もできるようにしたままfixedを使うようにしたい人には使える方法なのかも。