【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;の追加することで解決できました。