Scroll Shadows and CSS Parallax Back on Track After Years of Safari Trouble
Two beloved pure CSS techniques — scroll shadows and CSS-only parallax — appear to be working in modern Safari again, something that hasn’t been the case since iOS 13 introduced a major regression.
Scroll shadows, a trick popularized by Lea Verou, rely on layered background gradients and background-attachment to show a fading edge on scrollable containers, hinting at more content. Keith Clark’s pure CSS parallax effect is another long-standing favorite. Both were hit hard when Safari iOS 13 shipped, breaking them seemingly overnight.
The mystery is that the root cause was never confirmed. Apple’s Safari 13 release notes point at changes to accelerated scrolling and default page scaling behavior on iPad, but there’s no explicit mention of either technique. When did things get fixed? For scroll shadows, Safari 15.4 included work on background-attachment: local. For parallax, Safari 14.1 added support for individual transform properties — possibly the culprit or the cure.
As of Safari 15.5 on iPad, both demos render correctly again per an update from a CSS-Tricks reader. What precisely revived them remains unconfirmed, but developers who had written off these approaches can now dust them off with some confidence.
