Сайт работает на Android, но ломается на iPhone/Safari — почему и как это исправить?

Если сайт работает на Android, но ломается на iPhone, почти всегда дело в браузерном движке: Chrome на Android работает на Blink, а Safari и остальные браузеры на iPhone, включая Chrome, — на движке Apple, WebKit. Чаще всего виноваты полноэкранные блоки высотой 100vh, даты в формате, который Safari не понимает, фоновое видео без muted и playsinline, CSS, который старые версии iOS читают только с префиксом -webkit-, и заблокированные сторонние cookie. Иногда же проблема не в сайте, а в конкретном iPhone (блокировщик контента, VPN, «Частный узел» или «Экранное время»), поэтому сначала исключите телефон.

Ниже — быстрая проверка, которая покажет, виноват сайт или телефон, таблица «симптом → причина», решение для каждой причины и способы проверить сайт в Safari, даже если iPhone у вас нет.

Сначала проверьте: проблема в сайте или в конкретном iPhone?

Прежде чем править код, исключите телефон посетителя. Попросите его проверить следующее (или сделайте это сами на любом iPhone):

• Откройте страницу в частной вкладке. Если там всё в порядке, скорее всего, мешают сохранённые данные (кэш, cookie) или расширение; от сохранённых данных обычно помогает «Настройки» → «Приложения» → Safari → «Очистить историю и данные».

• Отключите блокировщики контента для этой страницы через меню настроек страницы в Safari или в разделе «Настройки» → «Приложения» → Safari → «Расширения». Блокировщики рекламы нередко прячут формы записи, чаты, карты и баннеры cookie.

• Переключитесь с Wi‑Fi на мобильный интернет и временно отключите VPN и «Частный узел» iCloud.

• Проверьте «Экранное время»: ограничения контента могут блокировать сайты на детском или рабочем телефоне.

• Убедитесь, что включён JavaScript: «Настройки» → «Приложения» → Safari → «Дополнительные параметры» → JavaScript.

• Посмотрите версию iOS («Настройки» → «Основные» → «Об этом устройстве»). Если iPhone больше не обновляется, в нём остаётся и старая версия Safari.

Правило простое: если проблема повторяется на нескольких iPhone с актуальной iOS и выключенными блокировщиками — виноват сайт. Если только на одном телефоне — почти наверняка дело в его настройках или устаревшей iOS. А если вёрстка «едет» на всех телефонах, а не только на iPhone, скорее всего, дело в адаптивности, а не в Safari: об этом в статье Сайт выглядит на телефоне иначе, чем на компьютере — что не так?.

Почему iPhone ведёт себя иначе: на iPhone даже Chrome — это WebKit

У каждого браузера есть движок, который превращает код в то, что вы видите на экране. Chrome, Edge, Samsung Internet и большинство браузеров на Android используют один и тот же движок — Blink. На iPhone же и Safari, и Chrome, и Firefox, и Edge, и Яндекс Браузер работают на WebKit от Apple.

Apple разрешила сторонние движки в ЕС начиная с iOS 17.4 и в Японии — с iOS 26.2, но на середину 2026 года крупные браузеры на iPhone, включая Chrome, по-прежнему работали на WebKit: сборку Blink для iOS, которую команда Microsoft Edge показала в июне 2026 года, сами авторы назвали исследовательским прототипом, а не продуктом. Поэтому на практике, если что-то ломается на iPhone, это проблема WebKit — каким бы браузером ни пользовался посетитель.

Ещё два важных момента. Safari на iPhone обновляется вместе с iOS: старый iPhone, который больше не получает обновлений, застревает со старым движком, и то, что работает на новом телефоне, на нём может не работать. Кроме того, движки различаются мелочами по умолчанию, а не только набором функций: то, что Chrome молча «прощает» (например, небрежно записанную дату), в Safari может просто не сработать.

Симптом → вероятная причина

Самые частые причины и как их исправить

Полноэкранные блоки обрезаны (100vh). Панель Safari на iPhone сжимается и разворачивается при прокрутке, а 100vh считается для экрана со свёрнутой панелью. Пока панель видна, «полноэкранный» блок оказывается выше видимой области, и кнопка внизу уходит под неё. Используйте height: 100dvh (динамическая высота окна просмотра), а строкой выше оставьте 100vh как запасной вариант. Safari поддерживает dvh начиная с iOS 15.4.

Даты, которые Safari не может прочитать. Обычная дата вроде «2026-07-11» проблем не вызывает. Ловушка — дата в нестандартном формате: строки вроде «07-11-2026» или «2026-07-11 18:30:00 GMT+0300» Chrome как-то разбирает, а Safari возвращает Invalid Date, и таймер, календарь записи или дата мероприятия становятся пустыми только на iPhone. Привычный формат «11.07.2026» Safari тоже не понимает (а Chrome читает его как 7 ноября), поэтому в коде его лучше не использовать вовсе. Старые версии Safari, которые остаются на iPhone без обновлений, вдобавок не понимают дату и время через пробел («2026-07-11 18:30:00») — а именно так их часто отдают базы данных и плагины. Надёжный вариант — формат ISO с буквой T («2026-07-11T18:30:00», при необходимости со смещением часового пояса, например +03:00) или разбор дат библиотекой.

Фоновое видео не запускается. Safari запускает видео автоматически, только если оно без звука (muted или вовсе без звуковой дорожки), а на iPhone ему ещё нужен атрибут playsinline, иначе видео будет открываться на весь экран. Но даже так в режиме энергосбережения автозапуск отключён намеренно, и поверх видео показывается кнопка воспроизведения. Поэтому: autoplay, muted и playsinline вместе, постер, который хорошо смотрится сам по себе, и никакой важной информации, которая есть только внутри видео. Подробнее — в статье Фоновое видео на главной: когда помогает, а когда убивает скорость и конверсию.

Нет размытия и эффекта «стекла». До iOS 18 Safari понимал backdrop-filter только с префиксом -webkit-. Если в CSS (или после сборки) осталось только свойство без префикса, на iPhone с iOS 17 и более ранними версиями фон будет плоским, а текст поверх него иногда нечитаемым. Пишите оба варианта — -webkit-backdrop-filter и backdrop-filter — и проверяйте, что текст читается и без размытия.

На старых iPhone не работают меню, слайдеры, формы. Одна-единственная функция JavaScript, которую не знает Safari посетителя, может остановить весь файл скрипта, а вместе с ним и всё, что от него зависит. Типичный пример — lookbehind в регулярных выражениях: он поддерживается только с iOS 16.4, и на более старых версиях скрипт с ним падает с синтаксической ошибкой ещё до запуска. Задайте в сборщике реалистичный список поддерживаемых браузеров, чтобы код транспилировался, проверяйте поддержку новых функций на caniuse.com или в MDN и смотрите консоль на реальном устройстве (об этом ниже).

На старых iPhone не видно картинок. Safari показывает AVIF начиная с iOS 16, а WebP — с iOS 14. Если сайт отдаёт только AVIF, на старых iPhone будут пустые блоки. Используйте элемент picture с запасным JPEG или PNG либо доверьте выбор формата CMS или CDN для изображений.

Не работает вход, онлайн-запись или оплата. Начиная с iOS 13.4 Safari по умолчанию блокирует сторонние cookie. Виджет записи, чат, форма входа или оплаты, встроенные через iframe с другого домена, могут терять сессию, возвращаться на первый шаг или не отправляться — и только на iPhone. Спросите у сервиса, есть ли у него вариант встраивания, совместимый с Safari, откройте этот шаг в новой вкладке или через переадресацию вместо iframe, а если виджет ваш — используйте Storage Access API, который рекомендует WebKit.

Страница увеличивается при нажатии на поле. Если текст в поле ввода меньше 16px, Safari на iPhone увеличивает страницу сразу после нажатия, и вёрстка «прыгает». Задайте полям формы размер шрифта не меньше 16px. Не «лечите» это запретом масштабирования в meta viewport: так вы мешаете людям, которым нужно увеличить текст, чтобы его прочитать.

Номера телефонов меняют цвет. Safari на iOS превращает всё, что похоже на номер телефона, в ссылку для звонка, и номер может сменить цвет и сломать дизайн. Оформите настоящие номера как ссылки tel: с собственным стилем, а чтобы отключить автоопределение в остальных местах, добавьте meta-тег format-detection со значением telephone=no.

Как диагностировать — с iPhone и без него

Реальный iPhone по-прежнему самый надёжный способ проверки, но не единственный:

Safari на Mac использует тот же движок, поэтому многие ошибки CSS и JavaScript видны и там. Но там нет сжимающейся панели и сенсорного ввода, так что часть проблем «только на iPhone» на компьютере не проявится. Сборка WebKit в Playwright близка к Safari, но не идентична ему, поэтому итог всё равно стоит подтвердить на реальном устройстве.

Как подключиться к iPhone с Mac (по инструкции Apple):

• На iPhone: «Настройки» → «Приложения» → Safari → «Дополнительные параметры», включите «Веб-инспектор». На iOS 17 и более ранних версиях тот же переключатель находится в «Настройках» → Safari, в дополнительных параметрах.

• На Mac: меню «Safari» → «Настройки» → «Дополнения», поставьте флажок «Показывать функции для веб-разработчиков».

• Подключите iPhone кабелем, при запросе подтвердите доверие к компьютеру, затем в меню «Разработка» выберите iPhone и нужную страницу. В консоли будет точный текст ошибки, а в инспекторе элементов видно, какое правило CSS применяется.

Дальше действуйте по порядку:

• Спрашивайте точно: модель iPhone, версию iOS, какой браузер, скриншот или запись экрана и включён ли режим энергосбережения. «Не работает» не говорит ничего; «кнопка под формой обрезана на iPhone 12» говорит всё.

• Тестируйте по отдельности: отключайте по очереди анимации, видео, эффекты размытия и сторонние виджеты. Когда проблема исчезнет — виновник найден.

Золотое правило: сначала воспроизведите проблему, потом чините. Исправления «наугад» обычно ломают что-то другое.

Как не допустить этого с самого начала

Самый дешёвый баг в Safari — тот, который вы так и не написали. Принципы, по которым мы работаем:

• Тестируем на реальном iPhone ДО запуска, а не после жалоб клиентов, и по возможности ещё на одном, постарше.

• Заранее решаем, какие версии iOS поддерживаем, и настраиваем под них список браузеров в сборщике.

• Проверяем новые функции CSS и JavaScript на caniuse.com или в MDN и даём им запасной вариант: @supports в CSS, JPEG для браузеров без AVIF, постер для видео.

• С первого дня используем правильные единицы и атрибуты: dvh, playsinline и muted, поля форм от 16px, даты в формате ISO.

• Предпочитаем простые проверенные решения последним «модным» трюкам, которые работают только в Chrome, и избегаем тяжёлых анимаций, которые ведут себя непредсказуемо в разных движках.

• На WordPress или конструкторе после каждого крупного обновления темы или плагинов заново проверяем на iPhone слайдеры, всплывающие окна и полноэкранные блоки.

Именно поэтому в MPO Web Studio, небольшой веб-студии из Клуж-Напоки, мы сначала делаем бесплатное демо вашего сайта и проверяем его на iPhone и Android ещё до разговора о деньгах. Вы видите реальный результат на своём телефоне, а не обещание. Работаем полностью удалённо, с прозрачными ценами.