【CSS】iPhoneのSafariでposition:fixedが効かないときにやったこと
目次
position:fixed;が効かない
これはiPhoneに限ったことかもしれませんが、position:fixed;で『TOPに戻る』ボタンを画面スクロールに合わせて追従するように、ブラウザの右下に固定しようとしました。ところが、Windows PCのChromeではちゃんと固定されているのですが、iPhoneのSafariやChromeアプリでは固定されませんでした。そこで解決策メモ。position:sticky;でも同様みたいです。
ベンダープレフィックスが必要だった
解決策はposition: -webkit-fixed;の追加で解決できました。
.ScrollTop {
position: -webkit-fixed;
position: fixed;
right: 0;
bottom: 0;
display: flex;
z-index: 100;
}
あと、ヒントになった以下のページよると、<span>や<a>タグでは、display: flex;またはdisplay: block;も必要みたいです。
ちなみにお世話になった『トップに戻る』ボタンのサンプル
以下のページを参考に、一定のスクロール後に『TOPに戻る』ボタンを作成したところ、iPhoneのSafariでボタンが固定されませんでした。このソースにposition: -webkit-fixed;の追加することで解決できました。