Почему CSS scroll-behavior smooth не работает на iOS устройствах: причины и решения

Что такое CSS scroll-behavior: smooth и зачем оно нужно

CSS-свойство scroll-behavior позволяет управлять анимацией прокрутки внутри областей с прокруткой, а также при переходах по якорным ссылкам на странице. Значение smooth запускает плавную прокрутку, улучшая пользовательский опыт и повышая визуальную привлекательность интерфейса.

Пример простого использования:

html {
scroll-behavior: smooth;
}

В современных браузерах включение scroll-behavior: smooth позволяет автоматически плавно скроллить к нужным частям страницы без дополнительного JavaScript.

Проверка поддержки scroll-behavior среди браузеров

Поддержка CSS-свойства scroll-behavior достаточно обширна в основных браузерах, однако iOS Safari зачастую является камнем преткновения для фронтенд-разработчиков, поскольку там поддержка либо отсутствует, либо ограничена.

Таблица поддержки scroll-behavior

Из таблицы видно, что именно iOS Safari является одной из основных причин неполадок с scroll-behavior: smooth.

Почему scroll-behavior smooth не работает на iOS Safari?

1. Ограниченная поддержка движка WebKit

Главная причина — это использование в iOS браузера Safari на основе WebKit, который долго не поддерживал это свойство. Несмотря на то, что на десктопном Safari поддержка появилась ещё в версии 15.4, iOS Safari получил поддержку только в аналогичной версии iOS 15.4, и даже тогда эта поддержка была далеко не идеальной.

Причина в особенностях реализации самого движка — у WebKit недостаточно развит механизм плавной прокрутки, отвечающий за CSS-метод scroll-behavior.

2. Приоритет физическому скроллингу и безопасности

iOS сильно ориентирован на аппаратное ускорение и интуитивные сенсорные события. В некоторых случаях плавная прокрутка через CSS может конфликтовать с нативной обработкой жестов, что приводит к блокировке или игнорированию этого свойства.

3. Наличие багов и ограничений в разных версиях iOS

Помимо полной или частичной поддержки, множество багов сохраняется до сих пор — например, некорректная работа scroll-behavior при скролле внутри элементов с overflow, либо отсутствие плавной прокрутки к интерактивным элементам по якорям.

4. Социально-статистические данные

• По данным на середину 2024 года, около 25% мобильных пользователей в мире используют iOS-девайсы.
• Из них порядка 30% всё ещё работают на версиях iOS ниже 15.4, где scroll-behavior не поддерживается.
• Наиболее популярные модели — iPhone 11, 12 и 13 — имеют хорошую поддержку, но многое зависит от обновления пользователей.

Это значит, что у значительной части аудитории свойство не работает, и это осложняет внедрение единого решения.

Обходные пути и рекомендации для разработчиков

Использование JavaScript-анимации прокрутки

Так как встроенное свойство CSS не работает во всех версиях iOS, практикуется использование JavaScript-библиотек или самописных функций для плавной прокрутки.

function smoothScrollTo(element) {
element.scrollIntoView({ behavior: ‘smooth’ });
}

Однако стоит помнить, что вызов scrollIntoView({behavior: ‘smooth’}) также может быть неправильно поддержан на старых iOS.

В таких случаях на помощь приходят решения с использованием requestAnimationFrame и постепенного изменения свойства scrollTop вручную. Вот упрощённый пример:

function scrollToY(yPos, duration = 400) {
const startY = window.scrollY;
const diff = yPos — startY;
let startTime = null;

function step(timestamp) {
if (!startTime) startTime = timestamp;
const time = timestamp — startTime;
const percent = Math.min(time / duration, 1);
window.scrollTo(0, startY + diff * percent);
if (time < duration) {
requestAnimationFrame(step);
}
}
requestAnimationFrame(step);
}

Использование сторонних библиотек

• smooth-scroll — популярная библиотека, позволяющая задавать плавную прокрутку, которая работает кроссбраузерно и обходит проблемы iOS.
• GSAP ScrollToPlugin — мощный инструмент с множеством возможностей для анимации скролла.

Использование атрибутов HTML вместо CSS

Например, некоторые разработчики применяют только программное управление скроллом через якоря и JavaScript, отказываясь полностью от scroll-behavior: smooth.

Пример теста: `scroll-behavior` на реальном iPhone

Рассмотрим следующий базовый пример, который работает во всех современных браузерах:

html {
scroll-behavior: smooth;
}

При клике на якорную ссылку (<a href=»#section1″>Перейти к разделу 1</a>) в Chrome и Firefox прокрутка будет плавной по умолчанию.

На iOS Safari:

• При версиях iOS ниже 15.4 прокрутка будет резкой, мгновенной (без анимации).
• На более новых версиях станет работать, но возможны лаги и фризы.

Часто задаваемые вопросы (FAQ)

Почему разработчики не просто используют JavaScript?

JavaScript-анимация скролла более ресурсоёмкая и сложная в поддержке. CSS-решение лучше с точки зрения производительности и удобства. Но в условиях ограничений iOS приходится делать выбор в пользу JS.

Есть ли шансы, что iOS полностью исправит поддержку scroll-behavior?

Apple постепенно улучшает WebKit и внедряет новые стандарты. С каждым обновлением iOS поддержка CSS-свойств улучшается, но для старых устройств и версий ограничений не избежать.

Можно ли как-то проверить поддержку scroll-behavior программно?

Да, например, так:

const supportsSmoothScroll = ‘scrollBehavior’ in document.documentElement.style;
console.log(supportsSmoothScroll); // true или false

Однако, даже если свойство есть, поведение может быть неисправным.

Авторское мнение и совет

«Несмотря на очевидное желание полагаться на CSS-свойства для удобства, разработчикам стоит помнить, что мобильная аудитория на iOS остаётся значительной, а её устройства — далеко не всегда последние версии. В своих проектах лучше предусматривать резервные варианты плавного скролла через JavaScript с проверкой поддержки, чтобы обеспечить качественный UX для всех пользователей независимо от платформы».

Заключение

CSS scroll-behavior: smooth — это удобное и современное свойство, позволяющее реализовать плавную прокрутку страниц и блоков. Однако на iOS устройствах, особенно с версиями ниже iOS 15.4, оно работает с серьезными ограничениями или вовсе не поддерживается.

Причина кроется в архитектуре WebKit и особенностях iOS Safari, а также в приоритете аппаратных и нативных жестов. Чтобы избежать проблем с пользовательским опытом, разработчики должны проверять поддержку свойства и, при необходимости, использовать JavaScript решения для плавного скролла.

Только так можно обеспечить плавность прокрутки на всех платформах, включая подавляющую часть пользователей iPhone и iPad.

В итоге, несмотря на прогресс в стандартах и браузерах, забота о кросс-платформенной совместимости и условностях мобильного веба остаётся ключевым пунктом в разработке интерфейсов.