iPhone（safari, chrome）で縦書きフォームを表示したい

前提・実現したいこと

現在、「縦書きで入力できるフォーム」を作っています。
Windowsのchrome, IE11,Edge,Firefoxでは表示がうまくいったのですが、
MacのSafari、iPhoneのsafari,chromeではフォーム内の文字が「横向き」になってしまい直せないでいます。もし方法をご存知でしたらお答え頂きたいです。
よろしくお願いいたします。

該当のソースコード

以下のコードでsafariに対してフォーム(input, textarea)を縦書きにするよう、CSSハックを書いています。

css
1_::-webkit-full-page-media, _:future, :root
2input,
3textarea {
4    -webkit-writing-mode: vertical-rl;
5    writing-mode: vertical-rl;
6}

試したこと

ブラウザごとに以下をCSSハックで記述。
これでWindows上ではブラウザごとの対応ができました。
しかしMacのsafari、iPhoneのsafari, Chromeでは横書きのままでした。

・IE11

css
1@media all and (-ms-high-contrast:none) {
2    *::-ms-backdrop,
3    input,
4    textarea {
5        -ms-writing-mode: tb-rl;
6        writing-mode: tb-rl;
7    }
8}

・Firefox

css
1@-moz-document url-prefix() {
2    input,
3    textarea {
4        -moz-writing-mode: vertical-rl;
5        writing-mode: vertical-rl;
6    }
7}

**・Chrome **
chromeはフォームが縦書きにならないので、フォーム自体を回転し文字をwriting-mode: initalで戻しました。

css
1@media screen and (-webkit-min-device-pixel-ratio:0) {
2    input,
3    textarea {
4　　　position: absolute;
5        writing-mode: initial;
6        transform: rotate(90deg);
7        transform-origin: top left;
8    }
9}

**・Edge **
chromeのcssハックが適用されてしまうため、上書きしています。

css
1@supports (-ms-ime-align:auto) {
2　　input,
3   　textarea {
4        position: static;
5        -webkit-writing-mode: vertical-rl;
6        writing-mode: vertical-rl;
7        transform: none;
8        transform-origin: none;
9    }
10}