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

Это одна из самых неприятных ситуаций: вы открываете сайт на своём телефоне Android — и всё идеально. Потом клиент присылает скриншот с iPhone: кнопки наезжают друг на друга, видео не запускается, текст вылезает за экран. Кажется, что сайт наполовину сломан, хотя вы не видите ни одной проблемы.

Хорошая новость: это почти никогда не чёрная магия. Это известная разница между движками браузеров. Safari (движок WebKit) трактует некоторые вещи иначе, чем Chrome. В этой статье я объясню, почему возникают эти различия, какие самые частые конкретные причины и как их найти и исправить — даже если под рукой нет iPhone.

Почему возникает разница: Safari — это не Chrome

У каждого браузера есть движок, который превращает код в то, что вы видите на экране. Chrome, Edge, Brave и большинство браузеров на Android используют один и тот же движок — Blink. Safari — и, что важно, ВСЕ браузеры на iPhone, включая Chrome для iOS — обязаны использовать движок Apple, WebKit.

Вот ключ, который многие владельцы упускают: на iPhone нет настоящего Chrome. Если вы установите Chrome на iPhone, внутри всё равно Safari. Поэтому если что-то ломается на iPhone — это проблема WebKit, каким бы браузером ни пользовался посетитель.

WebKit строже и внедряет некоторые функции позже. Код, который работает на Android, потому что Chrome прощает мелкие ошибки, может отказать в Safari, который строже соблюдает правила.

Самые частые конкретные причины

По нашему опыту, почти все проблемы «только на iPhone» сводятся к нескольким повторяющимся виновникам:

• Высота экрана (100vh): на iPhone панель Safari скрывается и появляется вновь, поэтому 100vh больше реального экрана — секции «на весь экран» вылезают за рамки. Современное решение — единица dvh.

• Даты с дефисами («2026-07-11»): Safari отказывается читать даты с дефисами в коде, которые Chrome принимает. Итог: пустые календари или таймеры только на iPhone.

• Видео, которое не запускается: Safari требует, чтобы фоновое видео было muted и имело атрибут playsinline, иначе оно остаётся чёрным.

• Эффекты стекла (backdrop-filter) и некоторые анимации, которые корректны на Android, но исчезают в Safari.

• Поля ввода, которые резко увеличиваются при наборе, если текст слишком мелкий.

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

Строго говоря, iPhone не обязателен, чтобы поймать проблему, хотя тест на реальном устройстве остаётся самым надёжным.

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

• Воспроизведите на любом Mac: Safari на любом Mac тоже использует WebKit, поэтому многие баги проявляются там точно так же.

• Используйте режим разработчика в Safari (Web Inspector), который показывает, какое именно правило даёт сбой.

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

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

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

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

• Мы тестируем на реальном iPhone ДО запуска, а не после жалоб клиентов.

• Мы предпочитаем простые проверенные решения последним «модным» трюкам, которые работают только в Chrome.

• Мы используем правильные единицы и атрибуты (dvh, playsinline, muted) с самого начала.

• Мы избегаем тяжёлых анимаций, которые ведут себя непредсказуемо между движками.

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