Chris Połączenia przewijanie cieni jeden z jego ulubionych sztuczek CSS wszech czasów. Lea Verou spopularyzowany czyste podejście CSS przy użyciu czterech warstwowych gradientów tła z kilkoma sprytnymi background-attachment
magia. Rezultatem jest zręczna interakcja z przewijaniem, która daje użytkownikom wskazówkę, że dodatkowa zawartość jest dostępna w przewijalnym kontenerze.
Tylko jeden problem: to złamał w Safari iOS 13. Pewnego dnia wszystko było dobrze. Następny nie tak bardzo. I to nie była jedyna rzecz, której to dotyczyło. Efekt paralaksy tylko CSS Keitha Clarka również przestał działać właśnie wtedy.
Cóż, czytelniku Ronald napisał w powiedzieć, że wszystko znów działa! W rzeczywistości piszę to teraz na moim iPadzie (Safari 15.5), a demo Chrisa wygląda ostro jak zawsze. Podobnie jak Keith oryginalne demo.
Więc co go zepsuło? Nadal nie wiemy. Ale Informacje o wersji Safari 13 zaoferuj wskazówki:
- Dodano obsługę przyspieszonego przewijania jednym palcem do wszystkich ramek i
overflow:scroll
elementy eliminujące potrzebęset-webkit-overflow-scrolling: touch
.- Zmieniono domyślne zachowanie iPada dla szerokich stron internetowych z responsywnymi metatagami, które wymagają przewijania w poziomie. Strony są skalowane, aby zapobiec przewijaniu w poziomie, a rozmiar tekstu jest zmieniany w celu zachowania czytelności.
Kiedy został naprawiony i co to naprawiło? Cóż, po stronie cienia przewijania Safari 15.4 włączony trochę pracy nad background-attachment: local
to mogło załatwić sprawę. Po stronie paralaksy Safari 14.1 w dodatku wsparcie dla indywidualnych właściwości transformacji… więc może tak?