Webで縦書きコンテンツ〜Safariには気を付けろ！〜に助けられた話

ブッタイ!! 一期一会のブックタイトル。のサイトを作成した時に、Safariでレイアウト崩れが甚だしかったところ、Webで縦書きコンテンツ〜Safariには気を付けろ！に対策が書いてあって抜け出せましたので感謝申し上げます。（Qiitaでいいねしました）

それにたどり着くまで、Safariとflexboxの相性が悪いのか？？とか調べていました。しかもflexboxのバグが過去のSafariにあって自分のバージョンと比較してみたりして時間を消費してました。まさか縦書きのcss設定だったとは。。

レイアウト崩れの様子は以下の通りで、残念なくらい文字が重なりすぎてました。

修正点

Webで縦書きコンテンツ〜Safariには気を付けろ！にあった回避策、「writing-modeの指定を、縦書きにしたいコンテンツの一番上にする」を参考にしました。親要素にwriting-modeの指定を移動したら解消できました。

修正後

めでたくレイアウトが直りました。

おわりに

Chromeの開発者ツールでの動作はOKだったのですが、マルチブラウザのテストがあらためて必要と感じました。 ブッタイ!! 一期一会のブックタイトル。でどんな本のタイトルと出会えるかお試しあれ！