Chris gesprekken scroll schaduwen een van zijn favoriete CSS-trucs aller tijden. Lea Verou gepopulariseerd de pure CSS-benadering met behulp van vier gelaagde achtergrondgradiënten met een aantal slimme background-attachment magie. Het resultaat is een soepel scrollende interactie die gebruikers een hint geeft dat er extra inhoud beschikbaar is in een schuifbare container.
Slechts één probleem: het is kapot gegaan in Safari iOS 13. Op een dag was het allemaal goed. De volgende, niet zo veel. En dat was niet het enige dat getroffen was. Keith Clark's CSS-only parallax-effect ook gestopt met werken rond die tijd.
Nou, lezer Ronald schreef in om te zeggen dat alles weer werkt! Sterker nog, ik schrijf dit nu op mijn iPad (Safari 15.5) en de demo van Chris ziet er weer scherp uit als altijd. Zo is Keith's originele demo.
Dus, wat brak het? We weten het nog steeds niet. Maar de Release-opmerkingen voor Safari 13 bieden aanwijzingen:
- Ondersteuning toegevoegd voor versneld scrollen met één vinger naar alle frames en
overflow:scrollelementen die de noodzaak elimineren omset-webkit-overflow-scrolling: touch.- Het standaardgedrag op iPad gewijzigd voor brede webpagina's met responsieve metatags die horizontaal scrollen vereisen. Pagina's worden geschaald om horizontaal scrollen te voorkomen en alle tekst wordt verkleind om de leesbaarheid te behouden.
Wanneer is het verholpen en wat heeft het verholpen? Welnu, aan de kant van de schuifschaduw, de Safari 15.4 " inclusief wat werk aan background-attachment: local dat kan de truc hebben gedaan. Aan de parallax-kant, Safari 14.1 " toegevoegd ondersteuning voor individuele transformatie-eigenschappen ... dus misschien dat?
