Gulir Bayangan? Paralaks CSS murni? Permainan Kembali Aktif.

chris panggilan gulir bayangan salah satu Trik CSS favoritnya sepanjang masa. Lea Verou dipopulerkan pendekatan CSS murni menggunakan empat gradien latar belakang berlapis dengan beberapa kecerdasan background-attachment sihir. Hasilnya adalah interaksi pengguliran yang apik yang memberi petunjuk kepada pengguna bahwa konten tambahan tersedia dalam wadah yang dapat digulir.

Hanya satu masalah: itu pecah di Safari iOS 13. Suatu hari semuanya baik-baik saja. Berikutnya, tidak begitu banyak. Dan itu bukan satu-satunya hal yang terpengaruh. Efek paralaks khusus CSS Keith Clark juga berhenti bekerja saat itu.

Nah, pembaca Ronald menulis di untuk mengatakan bahwa semuanya bekerja sekali lagi! Sebenarnya, saya sedang menulis ini di iPad saya (Safari 15.5) sekarang dan demo Chris terlihat tajam seperti biasanya. Begitu juga dengan Keith demo asli.

Jadi, apa yang merusaknya? Kami masih tidak tahu. Tetapi Catatan rilis Safari 13 menawarkan petunjuk:

• Menambahkan dukungan untuk pengguliran yang dipercepat dengan satu jari ke semua bingkai dan overflow:scroll elemen menghilangkan kebutuhan untuk set-webkit-overflow-scrolling: touch.
• Mengubah perilaku default di iPad untuk halaman web yang luas dengan meta-tag responsif yang memerlukan pengguliran horizontal. Halaman diskalakan untuk mencegah pengguliran horizontal dan teks apa pun diubah ukurannya untuk menjaga keterbacaan.

Kapan diperbaiki dan apa yang diperbaiki? Nah, di sisi bayangan gulir, Safari 15.4 termasuk beberapa mengerjakan background-attachment: local yang mungkin telah melakukan trik. Di sisi paralaks, Safari 14.1 menambahkan dukungan untuk properti transformasi individu ... jadi mungkin itu?