javascript – Flickering horizontal strains on the animation made with canvas solely on iOS 16


I’ve webview software the place on the splash display there may be an animation with 2 gradients ‘waves’ made utilizing canvas. After I opened it with iOS 16 I seen that there are some scrange horizontal strains flickering in the course of the animation.

enter image description here

It occurs solely when the app is opened on the system with iOS 16.

I draw these animation with the code under:

  public drawWaveAnimation = (
    windowHeight: quantity,
    windowWidth: quantity,
    {
      canvas,
      context,
      heightRatio,
      frameRatio,
      trygonometricalFunction,
      gradientColors,
      sooner,
      frames,
      frequency,
      phi,
      startingHeightPosition,
    }: WaveAnimationOptions
  ) => {
    this[canvas].nativeElement.top = windowHeight;
    this[canvas].nativeElement.width = windowWidth;
    const cw = this[canvas].nativeElement.width;
    const ch = this[canvas].nativeElement.top;

    if (sooner) {
      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(
      sooner,
      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,
        sooner,
        frames,
        frequency,
        phi,
        startingHeightPosition,
      });
    });
  };

After I was testing it, I seen that after I take away gradient from the animation waves these flickering strains additionally disappear. I’ve the gradient injected like under:

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 can not reproduce it on the browser(safari, chrome), on XCODE simulator or android simulator. It occurs solely on the actual system with iOS 16.

Leave a Reply