Chris calls scroll shadows one his favourite CSS-Methods of all time. Lea Verou popularized the pure CSS strategy utilizing 4 layered background gradients with some intelligent background-attachment magic. The result’s a slick scrolling interplay that provides customers a touch that further content material is on the market in a scrollable container.
Only one downside: it broke in Safari iOS 13. Someday it was all good. The subsequent, not a lot. And that wasn’t the one factor affected. Keith Clark’s CSS-only parallax impact additionally stopped working proper about then.
Properly, reader Ronald wrote in to say that every one is working as soon as once more! In actual fact, I’m scripting this on my iPad (Safari 15.5) proper now and Chris’s demo is wanting sharp as ever. So is Keith’s unique demo.
So, what broke it? We nonetheless don’t know. However the Safari 13 launch notes supply clues:
- Added assist for one-finger accelerated scrolling to all frames andÂ
overflow:Â parts eliminating the necessity toÂscroll set-webkit-overflow-scrolling: contact.- Modified the default conduct on iPad for large internet pages with responsive meta-tags that require horizontal scrolling. Pages are scaled to stop horizontal scrolling and any textual content is resized to protect legibility.
When was it fastened and what fastened it? Properly, on the scroll shadow aspect, the Safari 15.4 included some work on background-attachment: native that will have executed the trick. On the parallax aspect, Safari 14.1 added assist for particular person rework properties… so possibly that?
