Chris calls scroll shadows one his favorite CSS-Tricks of all time. Lea Verou popularized the pure CSS approach using four layered background gradients with some clever background-attachment magic. The result is a slick scrolling interaction that gives users a hint that additional content is available in a scrollable container.
Just one problem: it broke in Safari iOS 13. One day it was all good. The next, not so much. And that wasn’t the only thing affected. Keith Clark’s CSS-only parallax effect also stopped working right about then.
Well, reader Ronald wrote in to say that all is working once again! In fact, I’m writing this on my iPad (Safari 15.5) right now and Chris’s demo is looking sharp as ever. So is Keith’s original demo.
So, what broke it? We still don’t know. But the Safari 13 release notes offer clues:
- Added support for one-finger accelerated scrolling to all frames and
overflow:elements eliminating the need toscroll set-webkit-overflow-scrolling: touch.- Changed the default behavior on iPad for wide web pages with responsive meta-tags that require horizontal scrolling. Pages are scaled to prevent horizontal scrolling and any text is resized to preserve legibility.
When was it fixed and what fixed it? Well, on the scroll shadow side, the Safari 15.4 included some work on background-attachment: local that may have done the trick. On the parallax side, Safari 14.1 added support for individual transform properties… so maybe that?
I tried doing it once but but could only make it work with JS, great to see it can be done with just CSS
My biggest issue with this approach is that it pretty much only works with text. If you put complex stuff inside the scrolling area like an image, or even anything with a background colour, the scroll indicators sit below the content and the illusion is spoiled
This has been my experience as well. I appreciate the article to see what is possible/not possible. But I had resort to JavaScript to get the effect.
I’ve found of another way a while ago, by using position sticky and hiding the shadow element behind the header: https://codepen.io/freeplayg/details/yLPGPWZ
The only issue is that the header itself can’t be directly against the top of the page.
I played around a bit with the CSS parallax demo, but unfortunately I still get a gap between background-layer and browser window (Chrome). When I disable the scrollbar it fits perfectly:
Does anybody know a better solution?