iPhoneは -webkit-transform: translate… とその子孫に position: fixed; が効かない

<a href="http://demos seroquel 50 mg.jquerymobile.com/1.4.3/panel/”>jQuery mobileのPanelのpushのよう
本文が横スライドしてメニューがせり出してくるナビがついたウェブサイトに
スクロールに追従して画面の下へ固定表示するボタンを追加しようとしたら…
iPhoneで全く追従してくれない。

iPhoneやChromeでiposition: fixed; が効いてくれない場合は
-webkit-transform: translate… を併せて設定しているか親要素に設定していないか確認してみてください。

参考記事で知ったのですが
-webkit-transform: translate… でグラフィックアクセラレーションが有効になったら
translateを設定している要素とその子孫のpositionが強制的にrelativeの振る舞いになる仕様なのだとか。

それをもとに調査してみたところ、この2点も確認。

translateZ(0)だけでなく、グラフィックアクセラレーションが有効になれば発生する

translateX、translateYなどtranslate系なら発生します。

Androidの標準ブラウザでは発生しない

XPERIA Z1f(Android4.2)とiPhone 5(iOS 7)で確認したところ、iPhone のみで発生しました。

結局、追従ボタンは…

グラフィックアクセラレーションとposition: fixed; の関係は
バグではなく仕様のようで、どうしようもなかったので
iOSの端末をJavascriptのユーザーエージェントで判定し
iPhone、iPadだけ、追従ボタンをjQueryのappendTo(appendTo)とbefore(after)で
グラフィックアクセラレーションが有効になっている要素の外側へ移動させることで解決しました。

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

関連記事

Pocket