Chris称 滚动阴影是他一直以来最喜欢的CSS技巧之一。Lea Verou使用四个分层的背景渐变和一些巧妙的background-attachment 魔法,推广了纯CSS的方法。其结果是一个灵活的滚动互动,给用户一个提示,即在一个可滚动的容器中还有其他内容。
只有一个问题:它在Safari iOS 13中坏了。有一天,它是所有的好。第二天,就不那么好了。这并不是唯一受影响的东西。Keith Clark的纯CSS视差效果也在那时停止工作。
读者罗纳德来信说,所有的东西又开始工作了。事实上,我现在正在我的iPad(Safari 15.5)上写这篇文章,克里斯的演示看起来一如既往地清晰。Keith的原始演示也是如此。
那么,是什么打破了它?我们仍然不知道。但Safari 13的发布说明提供了一些线索:
- 增加了对所有框架和元素的单指加速滚动的支持。
overflow:scroll元素的单指加速滚动支持,不再需要set-webkit-overflow-scrolling: touch。- 改变了iPad上需要水平滚动的、带有响应式元标记的宽幅网页的默认行为。页面被缩放以防止水平滚动,任何文本都被调整大小以保持可读性。
什么时候修复的,是什么修复的?好吧,在滚动阴影方面,Safari 15.4包含了一些关于background-attachment: local 的工作,可能已经完成了这个任务。在视差方面,Safari 14.1增加了对单个变换属性的支持......所以也许是那个?