Таблица с вертикальным написанием текста (баг на iOS) vertical-rl

Сам по себе, я обычно фрилансер, чем заказчик.. )

Есть у меня один действующий проект - https://anna-kuchyna.com/socionika/, и на данной странице, в контенте, есть таблица (Признак типа / Псевдоним). 

Проблема заключается в том, что в ней есть поля с вертикальным написанием текста (Иррациональный / Рациональный). Заглянув в код, можно увидеть, что я использую для таких полей связку таких параметров:

-webkit-transform: rotate(180deg);

transform: rotate(180deg);

-webkit-writing-mode: vertical-rl;

writing-mode: vertical-rl;

Тег с transform как раз здесь очень нужен, чтобы текст шёл именно снизу-вверх..

Однако кроссбраузерность всё таки подвела, и мой заказчик увидел баг на устройствах iOS, причём новых устройствах, где стоит новый Safari браузер. Сам я проверял на паре эмуляторов iOS, так как у себя не имею устройств с Apple / iOS, и это действительно так. 

Баг заключается в том, что на этих iOS устройствах не срабатывает тег writing-mode: vertical-rl;

В итоге текст просто выводится вверх ногами, благодаря тегу transform: rotate(180deg);

Также я смотрел поддержку тега в caniuse.com, и судя по всему он должен работать.. но нет..

Как пример, есть всеми любимый - https://developer.mozilla.org/ru/docs/Web/CSS/scroll-behavior, здесь тоже снизу есть таблица - Совместимость с браузерами, где есть такой же вертикальный текст и указаны те же параметры. Однако эта табличка в эмуляторе отображается корректно!

Собственно, суть такая, что мне нужно понять, что я не так указываю на своём проекте, и почему моя таблица имеет такой баг..? Можно ли обойтись только HTML + CSS, или нужен всё таки JS?

Ниже Скрин таблицы, и за ним скрин с iOS устройства..