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

Mistress for Christmas

メリーーーークリスマーーーーーッス!!!
2017年 メタルバンドAdventCalendar25日目、Merry Christmas and Happy New Year!!!

いろんなメタルバンドがクリスマスソングを歌っています。みんな大好きクリスマス!
たくさんあるけど、その中から適当に紹介しちゃうぜーーーー!!!

まずは、Iron Maidenで「Another rock and roll Christmas」だーっ!

トナカイの角のバックミラーがおしゃれ!

続いてKing Diamond「No Presents For Christmas」

いいねいいね!こーゆーの!こーゆークリスマスソング!!これを求めているのっ!!!

最後はAmon Amarthの「Viking Christmas」で締めくくり!

何言ってるかわからないけど、バイキングのクリスマスはきっとこんな感じなのね!と、勉強にもなる1曲!

以上です!

2017年 メタルバンドAdventCalendarへご参加いただきましたみなさま、師走のお忙しい中本当にありがとうございました!

メタル大好きですが、まだまだ知らないことも多く、楽しく記事を拝見しました。
また来年もきっとやると思うので、よろしくお願いしますー!

それではみなさま、良いお年をー!!


投稿者名 なちこ 投稿日時 2017年12月24日 | Permalink

チェロとドラムのメタルバンド、Apocalyptica(アポカリプティカ)

始まりました!2017年 メタルバンドAdventCalendar!!!
クリスマスまでもう少し!ドキドキワクワク!!

ということで、1日目はApocalyptica(アポカリプティカ)
フィンランドのバンドで、楽器がチェロとドラムです。ヴォーカルはいません。

まずは、メタリカのカバーアルバム「Plays Metallica by Four Cellos」から「Battery」をどうぞ。 Apocalyptica - Battery


投稿者名 なちこ 投稿日時 2017年12月01日 | Permalink

三軒茶屋星座館 1 冬のオリオンの感想

冬の寒い日に読みたい1冊

「三軒茶屋星座館 1」は、サブタイトルに「冬のオリオン」とありましたので、なんとなく冬になるまで読まずにおいていました。
晴れの日が少ない季節、下り気味な気分を優しくしてくれる本です。


投稿者名 なちこ 投稿日時 2017年11月26日 | Permalink