Chris nennt Scroll Shadows einen seiner Lieblings-CSS-Tricks aller Zeiten. Lea Verou popularisierte den reinen CSS-Ansatz mit vier geschichteten Hintergrundverläufen und etwas cleverem background-attachment-Zauber. Das Ergebnis ist eine schicke Scrolling-Interaktion, die Benutzern einen Hinweis darauf gibt, dass zusätzliche Inhalte in einem scrollbaren Container verfügbar sind.
Nur ein Problem: Es brach in Safari iOS 13. Eines Tages war alles gut. Am nächsten Tag nicht mehr so sehr. Und das war nicht das Einzige, was betroffen war. Keith Clarks CSS-only Parallax-Effekt hörte zu dieser Zeit ebenfalls auf zu funktionieren.
Nun, Leser Ronald schrieb, um zu sagen, dass alles wieder funktioniert! Tatsächlich schreibe ich dies gerade auf meinem iPad (Safari 15.5) und Chris' Demo sieht so scharf aus wie immer. Das gilt auch für Keiths Originaldemo.
Also, was hat es kaputt gemacht? Wir wissen es immer noch nicht. Aber die Safari 13 Release Notes bieten Hinweise
- Unterstützung für Ein-Finger-Beschleunigung-Scrolling für alle Frames und
overflow:-Elemente hinzugefügt, wodurch die Notwendigkeit vonscroll set-webkit-overflow-scrolling: touchentfällt.- Das Standardverhalten auf dem iPad für breite Webseiten mit responsiven Meta-Tags, die horizontales Scrollen erfordern, wurde geändert. Seiten werden skaliert, um horizontales Scrollen zu verhindern, und jeder Text wird vergrößert, um die Lesbarkeit zu erhalten.
Wann wurde es behoben und was hat es behoben? Nun, auf der Scroll-Shadow-Seite, die Safari 15.4 enthaltenen Arbeiten an background-attachment: local könnten den Trick gemacht haben. Auf der Parallax-Seite hat Safari 14.1 die Unterstützung für einzelne Transformations-Eigenschaften hinzugefügt... also vielleicht das?
Ich habe es einmal versucht, aber es hat nur mit JS funktioniert. Toll zu sehen, dass es auch nur mit CSS geht.
Mein größtes Problem mit diesem Ansatz ist, dass er so ziemlich nur mit Text funktioniert. Wenn Sie komplexe Dinge in den Scrollbereich einfügen, wie z. B. ein Bild oder auch etwas mit einer Hintergrundfarbe, sitzen die Scrollindikatoren unter dem Inhalt und die Illusion ist ruiniert.
Das war auch meine Erfahrung. Ich schätze den Artikel, um zu sehen, was möglich/nicht möglich ist. Aber ich musste auf JavaScript zurückgreifen, um den Effekt zu erzielen.
Ich habe vor einiger Zeit eine andere Möglichkeit gefunden, indem ich Position Sticky verwendet und das Schattenelement hinter dem Header versteckt habe: https://codepen.io/freeplayg/details/yLPGPWZ
Das einzige Problem ist, dass der Header selbst nicht direkt am oberen Rand der Seite anliegen kann.
Ich habe ein wenig mit der CSS-Parallax-Demo herumgespielt, aber leider habe ich immer noch eine Lücke zwischen der Hintergrundebene und dem Browserfenster (Chrome). Wenn ich die Scrollleiste deaktiviere, passt es perfekt.
Weiß jemand eine bessere Lösung?