Flickering horizontal lines on the animation made with canvas only on iOS 16

Question

I have webview application where on the splash screen there is an animation with 2 gradients 'waves' made using canvas. When I opened it with iOS 16 I noticed that there are some scrange horizontal lines flickering during the animation.

It happens only when the app is opened on the device with iOS 16.

I draw these animation with the code below:

  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);
    const gradient = this[context].createLinearGradient(
      0,
      0,
      window.innerWidth,
      0
    );
    gradient.addColorStop(0, gradientColors[0]);
    gradient.addColorStop(1, gradientColors[1]);
    this[context].fillStyle = gradient;
    this[context].fill();

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

When I was testing it, I noticed that when I remove gradient from the animation waves these flickering lines also disappear. I have the gradient injected like below:

const gradient = this[context].createLinearGradient(
      0,
      0,
      window.innerWidth,
      0
    );
    gradient.addColorStop(0, gradientColors[0]);
    gradient.addColorStop(1, gradientColors[1]);
    this[context].fillStyle = gradient;
    this[context].fill();

I cannot reproduce it on the browser(safari, chrome), on XCODE simulator or android simulator. It happens only on the real device with iOS 16.

Answer 1

Had the same issue, looks like they fixed it in IOS 16.3