Крис звонки тени прокрутки один из его любимых CSS-трюков всех времен. Леа Веру популяризировал чистый подход CSS с использованием четырехслойных фоновых градиентов с некоторыми умными background-attachment магия. Результатом является гладкое взаимодействие с прокруткой, которое дает пользователям подсказку о том, что дополнительный контент доступен в прокручиваемом контейнере.
Только одна проблема: это сломал в Safari iOS 13. Однажды все было хорошо. Следующее не очень. И не только это повлияло. Эффект параллакса Кита Кларка только с помощью CSS тоже перестал работать примерно тогда же.
Ну, читатель Рональд написал в сказать, что все снова работает! На самом деле, я пишу это на своем iPad (Safari 15.5) прямо сейчас, и демонстрация Криса выглядит четкой, как никогда. Так и у Кита оригинальная демонстрация.
Так что же сломало? Мы все еще не знаем. Но Примечания к выпуску Safari 13 предложить подсказки:
- Добавлена поддержка ускоренной прокрутки одним пальцем ко всем кадрам и
overflow:scrollэлементы, избавляющие от необходимостиset-webkit-overflow-scrolling: touch.- Изменено поведение по умолчанию на iPad для широких веб-страниц с адаптивными метатегами, требующими горизонтальной прокрутки. Страницы масштабируются для предотвращения горизонтальной прокрутки, а размер любого текста изменяется для сохранения удобочитаемости.
Когда это было исправлено и чем это было исправлено? Что касается тени прокрутки, Safari 15.4 включены немного работы над background-attachment: local что, возможно, сделал трюк. Что касается параллакса, Safari 14.1 добавленный поддержка индивидуальных свойств преобразования… так что, может быть, это?
