CSS linear-gradient/radial-gradient渐变在移动端显示异常如何解决

该异常是移动端WebKit内核（覆盖iOS Safari、安卓端旧版Chromium、各大手机厂商内置浏览器）存在多年的已知渲染bug，触发逻辑非常明确：

• 当堆叠放置的渐变元素高度超过单视口高度，且未触发独立合成层时，浏览器会错误将渐变的绘制上下文绑定到页面初始加载时的视口区域，而非元素本身，超出首屏视口的部分不会继续渲染渐变过渡，直接显示渐变的终止纯色
• 多层带透明度、混合模式的渐变堆叠时，移动端浏览器的硬件加速模块会对非合成层元素执行强制裁剪，直接导致渐变断层、色带异常
• linear-gradient和radial-gradient的底层渲染逻辑一致，两类渐变触发该问题的条件完全相同，和渐变方向、色值数量无直接关联

按优先级依次尝试以下方案，可完全解决该渲染异常：

1. 强制渐变层生成独立合成层，修复硬件加速裁剪问题，给所有渐变堆叠元素添加如下CSS：

   .gradient-layer {
     /* 触发独立合成层 */
     transform: translateZ(0);
     will-change: transform;
     backface-visibility: hidden;
     /* 强制修正渐变绘制上下文绑定 */
     background-attachment: scroll;
     background-size: 100% 100%;
     background-repeat: no-repeat;
   }
   

2. 减少堆叠渐变层的合成层数量：3层纯div堆叠的结构会触发移动端浏览器的合成层数量阈值，浏览器会自动降级渲染，建议将其中2层渐变迁移到父元素的::before、::after伪元素上实现，仅保留1层独立div结构，可彻底避开降级逻辑

避坑提示：不要给非body元素的渐变设置background-attachment: fixed，全版本iOS Safari均不支持该属性在非根元素上生效，设置后会直接导致渐变绑定到视口，出现滚动错位、纯色块问题。

修复后满足以下表现即为问题解决：

• 移动端浏览器加载页面后上下滚动，渐变过渡平滑无断层、无突兀纯色块
• 横竖屏切换时渐变可自动适配新的容器尺寸，无拉伸、错位
• 页面缩放操作时渐变可跟随容器正常重绘，无渲染残留

内容的提问来源于stack exchange，提问作者Marnau