滚动阴影? 纯 CSS 视差? 游戏重新开启。 PlatoBlockchain 数据智能。 垂直搜索。 哎。

滚动阴影? 纯 CSS 视差? 游戏重新开启。

克里斯 电话 滚动阴影 一直以来他最喜欢的 CSS-Tricks 之一。 莉亚维鲁 推广 使用四层背景渐变的纯 CSS 方法和一些巧妙的 background-attachment 魔法。 结果是一个流畅的滚动交互,它给用户一个提示,即在可滚动容器中还有其他内容可用。

只有一个问题:它 打破 在 Safari iOS 13 中。有一天一切都很好。 下一个,不多。 这不是唯一受到影响的事情。 Keith Clark 的纯 CSS 视差效果 那时也停止了工作。

嗯,读者 罗纳德在 说一切都再次正常工作! 事实上,我现在正在我的 iPad (Safari 15.5) 上写这篇文章,而 Chris 的演示看起来和以往一样清晰。 基思的也是如此 原始演示.

那么,是什么破坏了它? 我们还不知道。 但是 Safari 13 发行说明 提供线索:

  • 添加了对单指加速滚动到所有帧的支持和 overflow:scroll 元素消除了需要 set-webkit-overflow-scrolling: touch.
  • 更改了 iPad 上具有需要水平滚动的响应式元标记的宽网页的默认行为。 页面被缩放以防止水平滚动,并且任何文本都被调整大小以保持易读性。

什么时候修复的,是什么修复的? 好吧,在滚动阴影方面,Safari 15.4 包括 一些工作 background-attachment: local 这可能已经成功了。 视差方面,Safari 14.1 添加 支持单个变换属性……也许是这样?

时间戳记:

更多来自 CSS技巧