iOS Safari带渐变背景的fixed元素渲染异常问题咨询

问题现象 #

• 带有渐变背景的fixed定位元素，在iOS Safari的半透明地址栏后方不会被渲染，会显示下方元素的背景；
• 向下滚动隐藏地址栏后，渐变fixed元素需要约1秒才能完成正确位置的渲染，期间下方内容会短暂可见。

示例代码 #

CSS代码 #

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 999px;
}

.gradient {
  background: linear-gradient(to right, red 0%, orange 100%);
}

.color {
  background: blue;
}

.scroll {
  height: 9999px;
}

HTML代码 #

<div class="fixed color"></div>
<div class="fixed gradient"></div>
<div class="scroll"></div>

原因解析 #

这是iOS Safari为了优先保证滚动流畅性，在渲染调度上的特殊策略导致的问题，具体细节如下：

• 滚动性能优先的延迟渲染：移动端滚动时，Safari会优先保障滚动的流畅度，对于需要GPU参与计算的复杂视觉效果（比如渐变、阴影、圆角），会暂时延后渲染。fixed定位元素本身就需要浏览器做特殊的定位处理，叠加渐变背景后计算量进一步增加，自然被纳入延迟渲染的队列。
• 动态视口的重绘优先级排序：iOS Safari的地址栏显示或隐藏时，会触发视口尺寸的动态调整。此时浏览器会优先处理计算成本低的任务，比如纯色背景的绘制；而渐变背景需要GPU生成纹理，重绘优先级更低，就会出现短暂的内容穿透，直到GPU完成渐变背景的绘制。

这种机制是Safari在移动设备有限硬件资源下，平衡交互流畅度和视觉渲染效果的妥协方案，属于浏览器特有的渲染调度行为。

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