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

HTML-версткаЗавершен2 заявки428 просмотров
Найдите исполнителя для вашего проекта прямо сейчас!
Разместите заказ на фриланс-бирже и предложения поступят уже через несколько минут.

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

Есть у меня один действующий проект - 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 устройства.. 

JavascriptHTMLCSSiOS
2 года назад
Anykey679
Антон 
33 годаРоссия
8 лет в сервисе
Был
5 дней назад
Выбранный исполнитель
cherniienko
Александр 
37 летУкраина
3 года в сервисе
Был
месяц назад
2 года назад
$1
1 день
RUBUAH
Александр быстро отозвался на заказ, и после связи с ним, я получил подсказку, которая и решила в итоге проблему. Также в дальнейшем помог и с тестированием на iOS устройствах. Приятен в общении и всегда на связи. Сотрудничеством доволен! Мои рекомендации.
Я полностью доволен работой с данным заказчиком. Он отвечал на все наводящие вопросы, всегда был на связи. Надеюсь, ещё поработаем. Рекомендую!
  • Похожие заказы

  • Верстка макета

    ВНИМАНИЕ. Отклики без цены и сроков будут проигнорированны. не надо мне писать "Привет я с веблансера!" или "Какие сроки и бюджет?" - я это игнорирую. Интересен заказ - напишите сколько вам нужно времени и денег. Необходимо сверстать макет. ...

    JavascriptWordPressCSSBootstrapjQueryNode.jsВерстка макетаМногостраничный сайт
    HTML-верстка37 заявок
    Закрыт
    год назад

  • Надо добавить видео на главную страницу

    Приветствую. Есть у нас сайт, готовый, надо менять дизайн, чтоб видео-презентация была на главной странице. Сами не знаем где-как лучше, хотелось бы, чтоб предлагали варианты. Сайт на WP, желательно специалист широкого профиля, чтоб хотяб дизайн/версту ...

    WordPress
    HTML-верстка1 исполнитель
    Завершен
    2 года назад

  • Нужно сделать адаптивность сайта

    $10

    1.  Нужно сделать адаптивность сайта на странице https://p2pmonitor.com/login https://clip2net.com/s/4gOyvqa 2.  Когда переходим на страницу https://p2pmonitor.com/panel/MonoBank тоже нужно чтобы нормально отображалось в телефонах https://clip2net.com/s/4gOyy2Z 3.  Нужно чтобы при заходи на страницу с телефона убиралось меню https://clip2net.com/s/4gOyCVK 4.  Нужно настроить отображение ...

    HTML-верстка49 заявок
    Закрыт
    год назад

  • Верстка UI (React, Next, TypeScript)

    Необходимо сверстать два макета Обязательно использовать: React, Next и TypeScript HUD: [b]Левая часть:[/b] 1. левый верхний угол прогресс бары (min, max, value) обязательно SVG 1.1. счетчик очков, просто присылаю текст сколько очков у игрока 2. ниже прогресс бара (ATTENTION!) строка уведомлений ...

    TypeScriptFigmaReact.js
    HTML-верстка2 заявки
    Закрыт
    2 года назад

  • Поправить кусок кода css

    $3

    На странице есть 6 изображений, они идут в одну строку 2шт., ниже 1 изображение, далее 2 и снова одно. Поправить нужно срочно. Пишите свой телеграм.

    CSS
    HTML-верстка1 исполнитель
    Завершен
    2 года назад

  • Создать HTML шаблон для E-mail рассылки Опенкарт 2.0ю

    Необходимо создать HTML шаблон для E-mail рассылки для базе модуля [url=https://liveopencart.ru/opencart-moduli-shablony/moduli/mail-sms/podpiska-i-reklamnyie-kampanii-pro]Smart Newsletter Subscribe Pro Plus[/url] Опенкарт 2.0 Задача сделать простенький [url=https://docs.google.com/document/d/1twCOXIgyg3YDTarEKp9PjG7n7vRV56BodczB8PJAJB4/edit?usp=sharing]дизайн по тз[/url], чтобы он был совместим с [url=https://i.imgur.com/Tmb50NV.png]код масками модуля. [/url]

    OpenCartHTML
    HTML-верстка3 заявки
    Закрыт
    год назад

  • Js + вёрстка + дизайн (одной страницы)

    Приветствую. Требуется полностью оформить страницу с данными На ней будет таблица, требуется сделать сортировки по значениям у таблицы (например можно использовать готовое js решение datatables) В таблице будут сжатые фото, при клике на которые должны открываться ...

    JavascriptBootstrap
    HTML-верстка1 исполнитель
    Завершен
    2 года назад