Przewiń Cienie? Czysta paralaksa CSS? Gra z powrotem. Analiza danych PlatoBlockchain. Wyszukiwanie pionowe. AI.

Przewiń Cienie? Czysta paralaksa CSS? Gra z powrotem.

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?

Znak czasu:

Więcej z Sztuczki CSS