.elm::before { position: fixed }。

Style GuideをMobile Safari 8で確認していて気づいたのだけど、擬似要素をposition: fixedした場合、スクロールしている最中は位置が変化しないようだ。つまりスクロールを止めた後で位置がアップデートされるので、他のブラウザーのように完全に位置が固定されない。

Demo: Fixed Pseudo Element on Mobile Safari 8

デモでは見出しと概要に続く「Lorem Ipsum」という文字列が擬似要素として仕込んである。これを同時にposition: fixedで位置固定しているが、Mobile Safari 8ではスクロール中は位置が変化しないので、画面外にスクロールアウトしてしまう。スクロールを止めると位置固定で期待される位置に改めて描画される。

擬似要素ではない場合は今まで通り完全に位置が固定される。


パフォーマンスの向上を受けてかMobile Safari 8でJavaScriptでのスクロール・イベントの扱いが少し変わったことは注目されているが、CSSでは場合によっては似たようなことがまだ起こるようだ。

回避方法はまったく思いつかない。ただバグだとは思うので、そのうち直りそうではある。それまでは擬似要素と位置固定の組み合わせは鬼門と覚えておいた方が良さそうだ。