Firefoxでflexboxとwriting-mode:vertical-rlを併用すると表示が崩れる。

  1. Web

こんにちは。
表題の件で、どうにも最適な解決方法がわからない。
ご存じの方いらっしゃいましたらご指導くださいー!

まず、Firefox以外では、以下のように表示されます。(これが意図した表示)



しかし、Firefoxで見ると以下のように…。



さらに、右側に余白が出ます。横スクロールがずーーっと出る。(´;ω;`)ブワッ



Firefoxでのみこのように表示されるのですが、どうやらflexboxとwriting-mode:vertical-rlを併用するとこのようになってしまうみたい。

ソースコードはこちら(※上記画像から、関係のない部分は削除・変更しています。)

<h2>見出しタイトル</h2>
<ol>
  <li>1<span>縦書き項目</span></li>
  <li>2<span>縦書き項目</span></li>
  <li>3<span>縦書き項目</span></li>
  <li>4<span>縦書き項目</span></li>
  <li>5<span>縦書き項目</span></li>
  <li>6<span>縦書き項目</span></li>
</ol>
<style>
h2{
  text-align: center;
}
ol{
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: stretch;
          align-items: stretch;
}
ol li{
  margin: 0 0.5em;
  padding: 1em;
  background: #ccc;
  -moz-writing-mode: vertical-rl;
    -o-writing-mode: vertical-rl;
       writing-mode: vertical-rl;
    -webkit-text-orientation: upright;
    text-orientation: upright;
    letter-spacing: -0.5em;
    list-style: none;
}
ol li span{
  margin: 1.5em 0 0 0;
  padding: 1em;
  display: inline-block;
  letter-spacing: 0.03em;
  line-height: 1em;
  background: #FFF;
}
</style>

結局、
@-moz-document url-prefix()
でFirefoxだけスタイルを変えてしまった。(これも応急処置のような…w根本の解決ではないような気がする…)

うぅーん。どうしたら良いのか…。困った…。゚(゚´Д`゚)゚。

追記:2018/04/10時点での結果

追記です。

Twitterにてレスいただいて、解決(?)しました!
教えていただいた以下ページにもある通り、表題の現象はFirefoxのバグとのことで、Firefoxのアップデート待ちが「吉」のようです。
https://github.com/philipwalton/flexbugs/issues/98

そうなると、現状ではFirefoxのみハックで表示を変えてあげる方法が良さそうです。(個人的解決方法)

レスいただきましたみなさま、ありがとうございました!!


投稿者名 なちこ 投稿日時 2018年04月10日 | Permalink

電話が苦手な私が電話を掛けるタイミングと、気をつけていること


投稿者名 なちこ 投稿日時 2015年12月02日 | Permalink