Работал с разными препроцессорами (и экзотику зацепил), суть одна - каждый препроцессор что-то рутинное забирает под капот.
Научишься видеть результат верстки в этих табах прямо в коде - считай победил.
Мне было удобно. Сильно уменьшает мусор на экране.
Лучше в такое уметь чем нет. Надо быть готовым к любому вызову - будь то twig, либо jsx, либо еще какой шаблонизатор.
"Это путь" )
Я бы не полагался ни на один инструмент такого рода в плане шрифтов.
Даже одна и та же гарнитура может отличаться в зависимости от операционной системы(и даже версии ОС, если гарнитура встроенная) и/или браузера, т.к. обычное дело монтировать несколько форматов файлов шрифтов (а при конвертации нет 100% гарантии в полном совпадении результатов)
В хроме и именно на маке воспроизводится. Под виндой - нет.
На маке для класса .content-chat-content flex-direction: column-reverse ломается. Если оставить только column - всё ок.
Если проскроллить весь чат вверх - увидите кучу сломанной верстки.
И это только на маке.
Предложение - может в vue развернуть массив сообщений наоборот? и убрать реверс с колонки? Подозрение на то что на маке переполняется буфер или еще чего и хром сходит с ума.
synapse_people, не, я не про фреймворк. Базовый html файл имеет в первой строке такое начало как
<!DOCTYPE html>
...
Сталкивался с тем, что отсутствие этой строки могло развалить страницу, при этом стили все на месте и разметка целая.
Кстати говоря - вендорные префиксы в данный момент использовать нет смысла, т.к. актуальные версии браузеров уже вполне флекс на ура понимают.
И все строки в стиле с минусом в начале можно удалить.
ну, для начала я нашел как минимум кривую верстку - почему у вас для класса .main задана высота 100% с учетом того что ДО нее находится обычный не абсолютно спозиционированный блок .header-mobile (у которого расчетная высота 69px)?
Верстайте такое пожалуйста на флексах, что ли.
И еще - если браузер не сафари - в консоль падает ошибка js - нужно изолировать такие места, писать if и давать обрабатывать другие сценарии.
еще раз - при изменении вьюпорта браузер не пересчитывает vh. В ссылке описывается почему и как с этим бороться.
Пока разработчики мобильных браузеров делают то что делают - приходится страдать и учитывать этот нюанс.
Мобильному браузеру тяжеловато все оверфлоу и расчет позиционирования на нескольких слоях обрабатывать.
Вижу несколько вариантов развития событий:
1. Для мобил выводить не карту а скриншот и по клику открывать приложение с картами или попап на весь экран с реальной картой.
2. не использовать position-fixed для футера и переверстать на флексе. Это наиболее экономически выгодный вариант будет.
есть еще альтернатива, но гемороя там побольше - завернуть контент в оверфлоу скролл, а элемент с футером просто следом на флексе в колонку, без абсолютного позиционирования ессно, соответственно такие сеттинги только для мобилы через медиаквери в стилях.
Сама суть проблемы в особенностях реализации position-fixed на мобилах.
Самая боль была на старых айфонах из-за особенностей реализации оверлея в мобильной сафари.
Выбросьте дизайнера. Он у вас испортился.
Когда готовят такие подвалы - рисуют сначала сетку, в которой закладывают как именно будет вести себя контент в зависимости от наполнения.
И верстают уже сетку. Контент не должен ее сломать.
Заодно проверьте регистр букв в имени файла, это тоже критично.
Если сбрасываете на андроид или ios - это юникс системы, там это критично.