Сайт сдали, всё нравится — а через неделю звонит клиент: «На айфоне кнопка уехала, форма не отправляется». При этом у разработчика в Chrome всё идеально. Знакомая ситуация, и дело чаще всего не в кривых руках, а в том, что браузеры по-разному интерпретируют один и тот же код. Это нормальное свойство веба, а не баг. Разбираемся, что такое кроссбраузерность, где чаще всего ломается вёрстка и как проверить сайт до релиза, чтобы не потерять клиентов.
Что такое кроссбраузерность простыми словами
Кроссбраузерность — это способность сайта корректно работать во всех популярных браузерах и на разных устройствах. Важно понимать: цель не в попиксельно одинаковом виде везде, а в том, чтобы ключевые сценарии работали предсказуемо — меню открывается, формы отправляются, корзина считается, кнопки не уезжают. Техническая причина расхождений в том, что браузеры работают на разных движках: Chrome, Яндекс.Браузер, Edge и Opera — на Blink, Safari — на WebKit, Firefox — на Gecko. А на iPhone все сторонние браузеры обязаны использовать движок WebKit, как и Safari. Разные движки по-разному поддерживают CSS и JavaScript, отсюда и визуальные отличия.Почему браузеры показывают одну и ту же вёрстку по-разному
Даже на современном коде расхождения возникают по нескольким типовым причинам:- Разная поддержка стандартов. Новые CSS-свойства движки внедряют в разное время — то, что работает в Chrome, в Safari может игнорироваться или требовать префикса.
- Стили по умолчанию. У каждого браузера свои базовые отступы, размеры шрифтов и оформления для элементов — без сброса стилей вёрстка «поплывёт».
- Отрисовка шрифтов. Safari рендерит текст тоньше, Chrome — плотнее: один и тот же шрифт выглядит по-разному.
- Собственные элементы форм. Чекбоксы, выпадающие списки и выбор даты браузеры рисуют по-своему — сверстать их одинаково почти невозможно, нужно стилизовать вручную.
- Особенности мобильных браузеров. Адресная строка, запрет автовоспроизведения видео, поведение при открытии клавиатуры — всё это влияет на вёрстку.
Особая зона риска — Safari и iPhone
Многие заказчики просят «сделать как в Chrome», забывая, что у iPhone нет Chrome в привычном смысле — там WebKit. Типичные проблемы именно в связке iOS + Safari: секция на весь экран обрезается (свойство 100vh не учитывает схлопывающуюся адресную строку), фон с размытием подтормаживает, видео не autoplay'ится без звука, а поля с датой выглядят неожиданно. Плюс фиксированные элементы ведут себя странно, когда пользователь открывает клавиатуру. Вывод простой: если трафик мобильный, тест на реальном iPhone обязателен — эмуляция в браузере ловит далеко не всё.Сколько бизнесу стоит игнорировать кроссбраузерность
На десктопе Chrome занимает около 60% рынка, Яндекс.Браузер — порядка 20%, ещё около 5% — Firefox и Edge. На мобильных устройствах доля Safari держится в районе 25–30%, потому что это браузер по умолчанию на всех айфонах. Теперь арифметика: интернет-магазин с 10 000 визитов в месяц, из них 27% — пользователи Safari. Если у них не работает оформление заказа, вы теряете 2 700 сессий. При конверсии 2% и среднем чеке 5 000 ₽ это около 270 000 ₽ недополученной выручки в месяц — только из-за непроверенной совместимости. Сюда стоит добавить репутационные потери: пользователь, у которого не сработала оплата, обычно не возвращается.Чек-лист: как проверить сайт до релиза
Полный тест «на всех браузерах всех версий» экономически бессмыслен. Работает приоритизация — вот рабочий алгоритм:- Откройте Яндекс.Метрику и посмотрите, какими браузерами и устройствами пользуется именно ваша аудитория. Под них тестируем в первую очередь.
- Согласуйте с подрядчиком матрицу поддержки: например, две последние версии Chrome, Safari, Firefox и Яндекс.Браузера, iOS Safari от 14 версии.
- Проверьте сайт на реальных устройствах — минимум iPhone (Safari) и Android (Chrome). Эмуляция не заменяет железо.
- Прогоните ключевые сценарии: главная, каталог, карточка товара, корзина, оформление заказа, формы, оплата.
- Проверьте интерактив: выпадающие меню, модальные окна, слайдеры, маски ввода телефона, автозаполнение.
- Остальные комбинации браузеров и ОС прогоните в облачном сервисе — это дешевле, чем покупать десять телефонов.
- Все найденные баги зафиксируйте и согласуйте срок исправления до оплаты финального этапа работ.
Инструменты, которые экономят время
Ручная проверка — основа, но инструменты делают её быстрее и дешевле:- BrowserStack, LambdaTest — облако реальных устройств и браузеров, доступ от нескольких десятков долларов в месяц.
- Режим эмуляции устройств в DevTools Chrome и Safari — быстрый смоук-тест адаптивности, но не замена реальным телефонам.
- Can I Use — справочник поддержки CSS- и JS-возможностей в разных браузерах и версиях.
- Autoprefixer + Browserslist — автоматически добавляет префиксы и фолбэки под заданный список браузеров прямо при сборке.
- Safari Web Inspector — отладка сайта на подключённом iPhone с Mac.
Что спросить у подрядчика до старта работ
Кроссбраузерность должна быть зафиксирована в договоре или ТЗ, а не оставлена «как получится». Задайте четыре вопроса: какие браузеры и версии входят в поддержку (хороший подрядчик назовёт это браузерлистом и покажет, как он настроен); тестируют ли они на реальных iPhone и Android или только в эмуляторе; какой срок гарантийных исправлений после сдачи; как проходит приёмка — желательно по заранее согласованному списку сценариев на конкретных устройствах. Если на эти вопросы отвечают уклончиво — это прямой риск, что «на айфоне кнопка уехала» станет вашей проблемой, а не их.Кроссбраузерность — это не «идеально одинаково везде», а предсказуемая работа ключевых сценариев в браузерах, которыми пользуется ваша аудитория. Три практических шага: посмотрите в аналитике реальные браузеры клиентов, зафиксируйте матрицу поддержки в договоре с подрядчиком и проверьте сайт на реальном iPhone до подписания акта. Час тестирования до релиза стоит несравнимо дешевле недели переделок после него — а потерянные заявки вернуть уже не получится.