最近、スマートフォンを中心にドロワーメニューが流行っている。こういうやつ。 実装するのは極めて簡単で、トリガーとなるボタンが押されたらメインのコンテンツ部分に transform: translateX( 100px ) みたいにして動かすだけ。で、閉じるときにはその値を 0 に戻す。 ただこれ、固定ヘッダーを用いる場合には iOS でちょっと壁にぶつかる。iOS では GPU アクセラレーションが有効になっている要素内の全ての要素で position: fixed が position: relative のように振る舞われるためだ。 一度でもドロワーメニューが開かれれば translateX が当たっているので、その要素内に固定のヘッダーとかを持っている場合には固定されなくなってしまうのだ。 対応策は、 固定ヘッダーをやめる translateX の代わりに left プロパティを使う
![iOS でヘッダー固定のドロワーメニューを実装するときに気をつけたいこと](https://cdn-ak-scissors.b.st-hatena.com/image/square/0a63b33e8f36165a9a531019ce6fb10ecbdee780/height=288;version=1;width=512/http%3A%2F%2Fmelty.koume.in%2Fcontent%2Fimages%2F2015%2F04%2Fximage-150406-01-1.png.pagespeed.ic.dCXtx120m3.png)