【css】writing-mode（縦書き）要素をposition:fixed;で右固定すると端が切れる Safari/Firefox

タイトルの通り、縦書きのボタンを画面右端に固定したところ、Chromeやedgeでは問題なく見れるのに、SafariとFirefoxでは右端が切れてました。

横書きだったり、左固定なら問題なし

縦書き・右固定限定の不具合です。
縦ボタンなど普通設置しない?ものなのでしょうか？？^^;

ネットで調べてはみたんですが、分からなかったので、検証してみました。
まずはこちらのソースをご覧ください。

<!-- 縦ボタンのhtml -->
<div class="btn">
  <a href="#">縦ボタン</a>
</div>

/* 縦ボタンのCSS */
.btn {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 10;
}

.btn a {
  display: block;
  color: #fff;
  background-color: #277BC0;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  writing-mode: vertical-rl;
  padding: 10px;
}

すると、Chromeやedge↑では、右端ピッタリの位置にある。

しかし、SafariやFirefox↑だと、こんな感じで右端の向こうに切れる。

widthとheightを設定してみる

このボタンパーツには元々文字数の異なるテキストをあれこれ入れたかったので、あえてwidthとheightの値を設定していなかったので、設定してみると…↓

/* 縦ボタンのCSS */
.btn {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 10;
}

.btn a {
  display: block;
  color: #fff;
  background-color: #277BC0;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  writing-mode: vertical-rl;
  padding: 10px;
  width: 50px;   /*　widthの値を追加！！ */
  height: 100px; /*　heightの値を追加！！ */
}

↑Safari、FireFoxも両方右端ピッタリに！

親要素はいらなかった‥

…そして、これらを再現しようとコードを書いてるうちに、ボタンの構成を親要素(div)と子要素(a)で作らないで、a要素だけのボタンなら、widthとheightを入れなくても、SafariとFirefoxで右端切れずに表示されることを発見？しました…↓

<!-- 縦ボタンのhtml　a要素のみ -->
<a href="#" class="btn-02">縦ボタン其ノ二</a>

/* 縦ボタンのCSS　a要素のみ */
.btn-02 {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10;
  color: #fff;
  background-color: #FF7F3F;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  padding: 10px;
}

↑a要素だけのボタンで右端ピッタリの位置です！
（元々横書きのボタンを流用したので、位置調整をするために親要素がありました…）

何かの要素でwidthが100%より大きくなっているか

「css safari 画面 切れる…」などのキーワードで検索をすると、画面から何か要素がはみ出て、widthが画面100%より大きくなっている場合を指摘する記事などあるのですが、この検証ではbodyの中にボタン要素しか置いてないので、それは無いです。
paddingがwidthからはみ出たりしないよう、要素全体（body）にbox-sizing: border-box;も指定しています。

終わりに

実はiPhoneのChromeでも同じことが起きていましたが、メディアクエリ（max-width: 600px）でボタンのwidthとheightを入れると右端が切れることは無くなりました。
ではiPhoneで、ボタンの親要素無しなら右端切れないのか、Safariなど他のブラウザでの見え方は？というと、検証出来てないので、また別の機会にと思います。

CSSは奥が深いですね。
とういか…何か私に基礎的な知識が足りて無いだけなんでしょうか‥^^;

今回の縦書き要素固定の不具合は、とりあえずの解決策は見出したんですが、なぜ起こったのかというと、理由はよく分かりません…。
ご存知の方はご教授くだされば幸いです