Safariでposition: fixed; の要素が画面外にはみ出す原因と解決方法

2026/08/07

Web制作をしていて、MacのSafariでだけposition: fixed; right: 0;を指定した要素が画面右にはみ出す現象に遭遇しました。

Chromeでは問題なく表示されるため、最初はright: 0;やposition: fixed;を疑いましたが、原因は全く別のところにありました。

発生した症状

次のような固定ボタンを配置していました。

.floating_btn {
  position: fixed;
  right: 0;
  bottom: 120px;
　・・・・
}

しかしSafariでは、right: 0;を指定しているにもかかわらず、ボタンが画面の右側にはみ出してしまいます。

ChromeやEdgeでは正常に表示されるため、Safari特有の問題でした。

最終的に原因だったのは、この1行です。

writing-mode: vertical-rl;

ボタンのテキストを縦書きにしていたため、こちらの指定をしていました。

この指定を削除したところ、Safariでも正常な位置に表示されるようになりました。

Safari（WebKit）には以前から、次のような組み合わせでレイアウト計算がおかしくなることがあります。

その結果、要素の横幅を正しく計算できず、right: 0;を指定していても画面の外にはみ出してしまうことがあります。

Chromeでは再現しないため、原因の特定に時間がかかりました。

要素の幅を明示的に指定すると改善できました。

.floating_btn {
  width: 60px;
}

Safariでposition: fixed; right: 0;が効かないと思ったら、rightやfixedではなく、意外なCSSが原因になっていることがあります。

今回のケースでは、原因はwriting-mode: vertical-rl;でした。

意外な原因ですが、同じ現象で困っている方の参考になれば幸いです。