Scroll Shadows? Pure CSS Parallax? Recreation Again On.

Chris calls scroll shadows one his favourite CSS-Tips of all time. Lea Verou popularized the pure CSS method 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 drawback: it broke in Safari iOS 13. In the future it was all good. The following, not a lot. And that wasn’t the one factor affected. Keith Clark’s CSS-only parallax impact additionally stopped working proper about then.

Effectively, reader Ronald wrote in to say that each one is working as soon as once more! The truth is, I’m penning this on my iPad (Safari 15.5) proper now and Chris’s demo is trying sharp as ever. So is Keith’s authentic demo.

So, what broke it? We nonetheless don’t know. However the Safari 13 launch notes provide clues:

Added help for one-finger accelerated scrolling to all frames and overflow:scroll components eliminating the necessity to set-webkit-overflow-scrolling: contact.Modified the default conduct on iPad for extensive net pages with responsive meta-tags that require horizontal scrolling. Pages are scaled to forestall horizontal scrolling and any textual content is resized to protect legibility.

When was it mounted and what mounted it? Effectively, on the scroll shadow aspect, the Safari 15.4 included some work on background-attachment: native that will have achieved the trick. On the parallax aspect, Safari 14.1 added help for particular person rework properties… so possibly that?

Scroll Shadows? Pure CSS Parallax? Recreation Again On. initially printed on CSS-Tips. You must get the publication.