Chris Anrufe Scroll-Schatten einer seiner Lieblings-CSS-Tricks aller Zeiten. Lea Verou popularisiert der reine CSS-Ansatz mit vier geschichteten Hintergrundverläufen mit einigen cleveren background-attachment Magie. Das Ergebnis ist eine raffinierte Scroll-Interaktion, die den Benutzern einen Hinweis gibt, dass zusätzliche Inhalte in einem scrollbaren Container verfügbar sind.
Nur ein Problem: es pleite in Safari iOS 13. Eines Tages war alles gut. Das nächste, nicht so sehr. Und das war nicht das Einzige, was betroffen war. Keith Clarks Nur-CSS-Parallax-Effekt funktionierte damals auch nicht mehr.
Nun, Leser Ronald schrieb sagen, dass alles wieder funktioniert! Tatsächlich schreibe ich dies gerade auf meinem iPad (Safari 15.5) und Chris' Demo sieht scharf aus wie immer. Keiths auch Original-Demo.
Also, was hat es kaputt gemacht? Wir wissen es immer noch nicht. Aber die Versionshinweise zu Safari 13 Hinweise geben:
- Unterstützung für beschleunigtes Scrollen mit einem Finger zu allen Frames und hinzugefügt
overflow:scrollElemente, die die Notwendigkeit beseitigenset-webkit-overflow-scrolling: touch.- Das Standardverhalten auf dem iPad für breite Webseiten mit responsiven Meta-Tags, die horizontales Scrollen erfordern, wurde geändert. Die Seiten werden skaliert, um ein horizontales Scrollen zu verhindern, und die Größe von Text wird angepasst, um die Lesbarkeit zu erhalten.
Wann wurde es behoben und was hat es behoben? Nun, auf der Scroll-Schattenseite ist Safari 15.4 inklusive einige Arbeit an background-attachment: local das könnte den Trick getan haben. Auf der Parallaxenseite Safari 14.1 hinzugefügt Unterstützung für einzelne Transformationseigenschaften … also vielleicht das?
