移动端 WebView 渐变背景丢失 — 合成层隔离问题

问题现象

页面中某个元素的 linear-gradient 背景在交互（Tab 切换、DOM 变化、内容增减）后变淡、闪烁或消失。

环境	是否受影响	原因
桌面端 Chrome / Firefox / Safari	通常不受影响	桌面端 GPU 资源充足，合成层策略更宽松，几乎所有元素都能获得独立合成层
Android WebView（含 uni-app / Cordova / Capacitor / 小程序等）	受影响	移动端内存和 GPU 资源受限，WebView 会积极合并合成层以节省显存，reflow 时更容易触发合成层重分配
iOS WKWebView（含 uni-app / Capacitor 等）	受影响	同上，WKWebView 有独立的合成层合并策略，在低内存场景下表现更保守
移动端 Chrome（Android）	可能受影响	使用与 WebView 相同的 Blink 引擎，但 Chrome 有更激进的合成层优化，特定 reflow 场景仍可触发
移动端 Safari（iOS）	可能受影响	WebKit 引擎的合成层策略与 WKWebView 一致
微信小程序 / 支付宝小程序	可能受影响	底层同样是 WebView 渲染，受限于系统 WebView 的合成层行为

本质上，这不是 uni-app 或某个框架的 bug，而是移动端 WebView 在有限 GPU 资源下的合成层管理策略导致的通用问题。 任何运行在移动端 WebView 内的 Web 应用都可能遇到。

桌面端浏览器不容易复现，是因为桌面 GPU 显存通常是移动端的 4-16 倍，浏览器不需要积极回收合成层。

WebView 渲染引擎将 DOM 元素分配到不同的**合成层（Compositing Layer）**进行 GPU 加速绘制。

当页面中某个兄弟或子元素发生 reflow（布局重排） 时，WebView 可能会合并或重新分配合成层。如果带有 linear-gradient 的元素没有被提升为独立合成层，它的渐变渲染可能在 reflow 过程中被错误地重绘、混合或丢弃。

常见触发场景：

对带有 linear-gradient（或其他 GPU 绘制密集型属性）的元素，添加 transform: translateZ(0) 强制将其提升为独立的 GPU 合成层：

.gradient-container {
  background: linear-gradient(...);
  transform: translateZ(0);
}

transform: translateZ(0) 告诉渲染引擎该元素需要 3D 变换处理（即使实际偏移为 0），引擎会为其分配独立的 GPU 纹理。独立合成层的绘制结果被缓存在 GPU 中，兄弟元素的 reflow 不会触发该纹理的重绘，从而保证渐变渲染的稳定性。

transform: translateZ(0);     /* 推荐，兼容性最好 */
will-change: transform;       /* 更"正式"的声明，部分旧 WebView 不支持 */
backface-visibility: hidden;   /* 备选 */