Необходимо внести правки в вёрстку на сайте. Предпочтителен опыт работы с HTML-версткой. Подробное техническое задание будет предоставлено после ознакомления с опытом исполнителя.
HTML-верстка1 исполнитель
Закрыт
2 года назад
Таблица с вертикальным написанием текста (баг на iOS) vertical-rl
Завершен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 устройства..
Выбранный исполнитель
2 года назад
$1
1 день
Escrow
Александр быстро отозвался на заказ, и после связи с ним, я получил подсказку, которая и решила в итоге проблему. Также в дальнейшем помог и с тестированием на iOS устройствах.
Приятен в общении и всегда на связи. Сотрудничеством доволен! Мои рекомендации.
Я полностью доволен работой с данным заказчиком. Он отвечал на все наводящие вопросы, всегда был на связи.
Надеюсь, ещё поработаем.
Рекомендую!
Заявки фрилансеров
Даниил
25 лет
2 года в сервисе
Был
2 года назад
2 года назад
Похожие заказы
Требуется выполнить чистую HTML-верстку макета с использованием сетки Bootstrap и дополнительных классов. Верстка должна быть адаптивной с минимальным количеством ошибок в валидаторе. Необходимо соблюдение сроков и бюджета, предпочтение отдается долгосрочному сотрудничеству. Примеры работ обязательны.
HTML-верстка37 заявокЗакрыт2 года назадТребуется сверстать одну адаптивную страницу на основе макета из Figma. Необходимо учесть все элементы дизайна и обеспечить корректное отображение на различных устройствах. Ожидается качественная HTML-верстка с соблюдением всех стандартов.
HTML-верстка1 исполнительЗавершен2 года назадНеобходимо добавить видео-презентацию на главную страницу сайта, выполненного на WordPress. Ожидается обновление дизайна и верстки, возможны различные варианты реализации. Ищем специалиста широкого профиля для выполнения задачи. Обсуждаем цену и сроки, но ожидаем разумные предложения.
HTML-верстка1 исполнительЗавершен2 года назадТребуется сверстать макеты внутренних страниц с учетом адаптива. Имеется верстка главной страницы. Укажите сроки выполнения и стоимость работы. Обратите внимание на требования к адаптивному дизайну.
HTML-верстка39 заявокЗакрыт2 года назад- $10
Задача включает адаптацию сайта для мобильных устройств на страницах входа и панели MonoBank. Необходимо настроить отображение меню и полей, чтобы они корректно отображались на телефонах. Уберите меню при входе с мобильных устройств и оптимизируйте элементы для удобства пользователей.
HTML-верстка48 заявокЗакрыт2 года назад Необходимо сверстать два макета UI с использованием React, Next и TypeScript. Задача включает создание прогресс баров, уведомлений, мини-карты и кнопок с анимацией. Все изображения должны быть в формате SVG. Укажите стоимость и сроки выполнения.
HTML-верстка2 заявкиЗакрыт2 года назад- $3
Требуется срочное исправление CSS-кода. На странице расположены 6 изображений: 2 в строке, затем 1, далее 2 и снова 1. Необходимо внести изменения для правильного отображения. Ожидается быстрое выполнение задачи.
HTML-верстка1 исполнительЗавершен2 года назад Требуется разработать HTML шаблон для E-mail рассылки в OpenCart 2.0, совместимый с модулем Smart Newsletter Subscribe Pro Plus. Необходимо создать простой дизайн по заданному ТЗ, обеспечивая корректную работу с кодом масками модуля. Обратите внимание на совместимость и простоту верстки.
HTML-верстка3 заявкиЗакрыт2 года назадТребуется оформить страницу с таблицей, включающей сортировки и адаптивный дизайн. Необходима реализация с использованием JS (например, datatables) и Bootstrap для привлекательного оформления. Таблица должна содержать сжатые фото с возможностью открытия оригиналов. Важно, чтобы страница была удобна для чтения на мобильных устройствах и гармонично сочетала цветовую гамму и расположение элементов.
HTML-верстка1 исполнительЗавершен2 года назад