80chars - background-attachment CSS 移动端渲染之谜

最近在写这个 blog 主题的时候发现了一个奇怪的 CSS 支持问题。

我想让渐变背景能够固定并且占据完整 viewport ，所以我尝试使用了 background-attachment 这个 CSS 属性，如下：

body {
    background: #393451;
    background-attachment: fixed;
    background-position: center;
    background-image: url(/ps/gradient.png);
    background-blend-mode: screen;
    background-size: 32px 100vh;
}

网页示例：using background-attachment:fixed

在桌面端渲染没有问题，但如果用移动端浏览器访问，比如 iOS 上的 Safari 或者 Chrome ，问题就出现了。

这个网页背景会出现显示不正确或者能被滚动的情况。似乎这个属性在移动端支持不是很好，和 MDN 记录并不一致，而且好像也没有任何官方文档记录这个行为。

更迷幻的是，用 Chrome 模拟 iOS 渲染这个网页也是可以正常显示的……

Stack Overflow 上似乎也有人提出了这个疑问，有猜想说这个 fixed 会导致滚动时需要重复渲染的性能问题，所以这个 fixed 会被浏览器忽略。我觉得这个猜想并不是很科学，也没有找到对应的 bug 。

解决方法是不使用这个 CSS 属性，而是用另一个有 position: fixed 的元素盖在上面做一个 overlay 。

没问题的网页示例：workaround

反正有点迷…………

./80chars