iOS でヘッダー固定のドロワーメニューを実装するときに気をつけたいこと

最近、スマートフォンを中心にドロワーメニューが流行っている。こういうやつ。

実装するのは極めて簡単で、トリガーとなるボタンが押されたらメインのコンテンツ部分に transform: translateX( 100px ) みたいにして動かすだけ。で、閉じるときにはその値を 0 に戻す。

ただこれ、固定ヘッダーを用いる場合には iOS でちょっと壁にぶつかる。iOS では GPU アクセラレーションが有効になっている要素内の全ての要素で position: fixed が position: relative のように振る舞われるためだ。
一度でもドロワーメニューが開かれれば translateX が当たっているので、その要素内に固定のヘッダーとかを持っている場合には固定されなくなってしまうのだ。

対応策は、

1. 固定ヘッダーをやめる
2. translateX の代わりに left プロパティを使う
3. 黒魔術を使う

の3つだ。
一番良いのは1の固定ヘッダーをやめることだが、クライアントやデザイナーの意向で中々難しいこともあるだろう。かといって2を選んでしまうと、アニメーションが不自然にガクついて見れたものではなくなってしまう。
最終的には黒魔術に頼ることになると思う。

やり方はシンプルで、translateX の値が0、つまり初期値になっている状態のときには、attribute の style を剥がしてしまうのだ。
非依存なら elementNode.removeAttribute( “style” )、jQuery 依存なら $( “element” ).removeAttr( “style” ) でいける。 注意点は、こういったドロワーメニューは transition でアニメーションをかけることが一般的なので、そのアニメーションにかかる時間分、処理を遅延させてから剥がす。

「気持ち悪」と思う人が多数を占めると思うけど、スマートフォンサイトの制作に黒魔術はつきもの。やりたくなければ強力な交渉術とコミュ力を手にいれよう！

おしまい。