chris samtal rulla skuggor ett hans favorit CSS-trick genom tiderna. Lea Verou populariserade den rena CSS-metoden med fyra lager bakgrundsgradienter med lite smart background-attachment magi. Resultatet är en smidig rullningsinteraktion som ger användarna en hint om att ytterligare innehåll är tillgängligt i en rullningsbar behållare.
Bara ett problem: det pank i Safari iOS 13. En dag var allt bra. Nästa, inte så mycket. Och det var inte det enda som påverkades. Keith Clarks CSS-bara parallaxeffekt slutade också fungera precis då.
Tja, läsare Ronald skrev in att säga att allt fungerar igen! Faktum är att jag skriver det här på min iPad (Safari 15.5) just nu och Chris demo ser skarp ut som alltid. Det är också Keiths original demo.
Så vad bröt den? Vi vet fortfarande inte. Men Safari 13 versionsinformation ge ledtrådar:
- Lade till stöd för enfingeraccelererad rullning till alla bildrutor och
overflow:scrollelement som eliminerar behovetset-webkit-overflow-scrolling: touch.- Ändrade standardbeteendet på iPad för breda webbsidor med responsiva metataggar som kräver horisontell rullning. Sidorna skalas för att förhindra horisontell rullning och all text ändras storlek för att bevara läsbarheten.
När fixades det och vad fixade det? Tja, på rullningsskuggsidan, Safari 15.4 ingår lite arbete på background-attachment: local det kan ha gjort susen. På parallaxsidan, Safari 14.1 lagt till stöd för individuella transformeringsegenskaper... så kanske det?
