iosだとtable内要素のwriting-modeの表示が崩れる

Question

前提・実現したいこと

iosでwriting-mode:vertical-rlを正しく表示したい

発生している問題・エラーメッセージ

tableを組んで、中の要素でwriting-modeを指定していますが、
PC、androidは正常に表示されますが、iosのみ表示が崩れます。

試したこと

問題解決のためにできるだけ最小のコードで試そうとして、codepenを利用していましたが、解決には至りませんでした。
https://codepen.io/totocalcio/pen/YzqBMGe

Answer 1

縦書きにするCSS「writing-mode」がtableタグの中で効かない時 - Qiita

上記と似た現象のようです。
上記では、min-height を設定して解決したようです。

Safariテーブルのcolspan/writing-mode幅のバグを回避する

上記ではjQueryでサイズを設定して解決しているようです。

ご参考になれば。

Comments

[tanaka]

情報の提供と解決策の提示ありがとうございます。
min-height:3emの設定のみで解決することができました。
非常に助かりました。

Answer 2

縦書きにはなっているものの、セルの高さが足りていなくて2文字表示できずに改行されているようですね、ご提示のCodePenで、セルの高さを適当にCSSで指定したら期待通りの表示になりました。

いい感じの高さが確保されないか、ちょこちょこCSSをいじってみましたが、私の範囲で簡単に解決できる方法は見つけられませんでした。
セルに高さを与えてあげるような対応は可能でしょうかね？
(とりあえず2文字のようなので .tbl table tbody td { height: 3em; } とかでどう変わるかは確認いただけると思います)