Chris opkald rulleskygger et af hans yndlings CSS-tricks gennem tiderne. Lea Verou populariseret den rene CSS-tilgang ved hjælp af fire lags baggrundsgradienter med nogle smarte background-attachment magi. Resultatet er en glat rulleinteraktion, der giver brugerne et hint om, at yderligere indhold er tilgængeligt i en rulbar container.
Bare et problem: det gik i stykker i Safari iOS 13. En dag var alt godt. Det næste, ikke så meget. Og det var ikke det eneste, der blev påvirket. Keith Clarks parallakse-effekt, der kun er CSS holdt også op med at virke lige omkring dengang.
Nå, læser Ronald skrev ind at sige, at alt fungerer igen! Faktisk skriver jeg dette på min iPad (Safari 15.5) lige nu, og Chris' demo ser skarp ud som altid. Det er Keiths også original demo.
Så hvad brød det? Vi ved det stadig ikke. Men Safari 13 release notes komme med ledetråde:
- Tilføjet understøttelse af en-finger accelereret rulning til alle rammer og
overflow:scrollelementer, der eliminerer behovet forset-webkit-overflow-scrolling: touch.- Ændrede standardadfærden på iPad for brede websider med responsive meta-tags, der kræver vandret rulning. Sider skaleres for at forhindre vandret rulning, og al tekst ændres for at bevare læsbarheden.
Hvornår blev det rettet og hvad løste det? Nå, på rulleskyggesiden, Safari 15.4 medtaget noget arbejde på background-attachment: local det kan have gjort tricket. På parallaksesiden, Safari 14.1 tilføjet understøttelse af individuelle transformationsegenskaber... så måske det?
