iOS 16真机Canvas渐变波浪动画出现水平闪烁线问题求助

问题说明 #

WebView启动页的Canvas双渐变波浪动画，仅在iOS 16真机设备上出现动画过程中的水平闪烁线；移除渐变填充后闪烁消失，浏览器（Safari/Chrome）、Xcode模拟器、Android模拟器均无此异常。

动画闪烁效果：

核心原因 #

iOS 16的WebKit引擎对Canvas实时重绘场景下的线性渐变处理存在渲染bug，尤其是每帧重复创建渐变对象+路径重绘时，易触发像素对齐或渲染管线的异常。

修复方案 #

方案1：复用渐变对象，避免每帧重复创建 #

当前代码每帧都调用createLinearGradient生成新渐变，会强制WebKit重复计算渐变参数，大概率是触发闪烁的核心原因。将渐变对象提前初始化，仅在窗口尺寸变化时重新生成：

// 组件初始化时声明渐变对象
private waveGradient: CanvasGradient | null = null;

// 单独封装渐变初始化方法
private initGradient(windowWidth: number, gradientColors: string[], context: CanvasRenderingContext2D) {
  this.waveGradient = context.createLinearGradient(0, 0, windowWidth, 0);
  this.waveGradient.addColorStop(0, gradientColors[0]);
  this.waveGradient.addColorStop(1, gradientColors[1]);
}

// 修改动画绘制方法，复用已创建的渐变
public drawWaveAnimation = (
  windowHeight: number,
  windowWidth: number,
  {
    canvas,
    context,
    heightRatio,
    frameRatio,
    trygonometricalFunction,
    gradientColors,
    faster,
    frames,
    frequency,
    phi,
    startingHeightPosition,
  }: WaveAnimationOptions
) => {
  this[canvas].nativeElement.height = windowHeight;
  this[canvas].nativeElement.width = windowWidth;
  const cw = this[canvas].nativeElement.width;
  const ch = this[canvas].nativeElement.height;

  if (faster) {
    frames += this.changeAnimationSpeed(frames);
  } else {
    frames += 0.6;
  }

  phi = frames / frameRatio;

  this[context].clearRect(0, startingHeightPosition, cw, ch);
  this[context].beginPath();

  this[context].translate(0, startingHeightPosition);

  const reachHalfHeight = startingHeightPosition > windowHeight / 2;
  startingHeightPosition += this.changeGoingDownAnimationSpeed(
    faster,
    reachHalfHeight
  );

  this[context].moveTo(0, ch);

  const amplitude = windowHeight / parseFloat(heightRatio.toFixed(1));
  for (let x = 0; x < windowWidth; x += 1) {
    const y =
      (trygonometricalFunction(x * frequency + phi) * amplitude) / 2 +
      amplitude / 2;
    this[context].lineTo(x, y);
  }

  this[context].lineTo(windowWidth, ch);
  this[context].lineTo(0, ch);

  // 复用渐变，不存在则初始化
  if (!this.waveGradient) {
    this.initGradient(windowWidth, gradientColors, this[context]);
  }
  this[context].fillStyle = this.waveGradient!;
  this[context].fill();

  requestAnimationFrame(() => {
    this.drawWaveAnimation(windowHeight, windowWidth, {
      canvas,
      context,
      heightRatio,
      frameRatio,
      trygonometricalFunction,
      gradientColors,
      faster,
      frames,
      frequency,
      phi,
      startingHeightPosition,
    });
  });
};

// 监听窗口resize，重新生成渐变
window.addEventListener('resize', () => {
  this.initGradient(window.innerWidth, yourGradientColors, this[context]);
});

方案2：开启Canvas软件渲染模式 #

iOS WebKit的硬件加速渲染在特定场景下会出现异常，开启willReadFrequently强制使用软件渲染路径：

// 获取Canvas上下文时添加配置
const canvasEl = this[canvas].nativeElement;
const ctx = canvasEl.getContext('2d', { willReadFrequently: true }) as CanvasRenderingContext2D;

方案3：确保渐变坐标为整数 #

iOS渲染引擎对小数坐标的渐变处理可能存在像素偏移，将渐变结束坐标取整：

// 替换原渐变创建代码
const gradient = this[context].createLinearGradient(
  0,
  0,
  Math.floor(window.innerWidth), // 强制取整
  0
);
gradient.addColorStop(0, gradientColors[0]);
gradient.addColorStop(1, gradientColors[1]);
this[context].fillStyle = gradient;
this[context].fill();

验证建议 #

1. 优先测试方案1，复用渐变是最直接减少渲染开销的方式，大概率解决问题；
2. 若方案1无效，尝试方案2切换软件渲染；
3. 方案3作为补充，针对像素对齐类的渲染异常。

内容的提问来源于stack exchange，提问作者Paweł Stanecki