I am using image sequence in angular which works fine on Iphone chrome but lags on iphone safari

Question

1. Following is my code which includes the html,CSS and the ts file for the component. When the user scrolls the image in series is being changed and looks like a video playing on scroll.But the same scenario keeps on lagging on iPhone safari.
2. Does this lag happen on all safari devices ?
3. Is there any solution to the same problem ?

import { Component, HostListener, OnInit } from "@angular/core";

@Component({
  selector: "app-end-slider",
  templateUrl: "./end-slider.component.html",
  styleUrls: ["./end-slider.component.css"],
})
export class EndSliderComponent implements OnInit {
  frameCount = 330;
  frameCountBottle = 330;
  currentImage = new Image();
  context: any = null;
  imageWidth = 0;
  imageHeight = 0;
  iVisible = false;
  WH = 0;
  textTop = 0;
  textTop2 = -100;
  textTop3 = -100;
  textTop4 = -100;
  opacityTop = 0;
  opacityTop2 = 0;
  opacityTop3 = 0;
  opacityTop4 = 0;
  orientation = true;

  constructor() {}

  ngOnInit(): void {

    this.preloadImages();
    const canvas: any = document.getElementById("can-slider-4");
    console.log(window.innerWidth);
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    console.log(window.innerHeight);
    this.WH = window.innerHeight;
    this.textTop = this.WH;
    this.textTop2 = this.WH;
    this.textTop3 = this.WH;
    this.textTop4 = this.WH;
    this.context = canvas.getContext("2d");
    this.currentImage.src = this.currentFrame(1);
    const ratio =
      this.currentImage.naturalWidth / this.currentImage.naturalHeight;
    this.imageWidth = canvas.width;
    this.imageHeight = canvas.height; 
   
    const self = this;
    this.currentImage.onload = function () {
 
      var scale = Math.max(
        canvas.width / self.currentImage.width,
        canvas.height / self.currentImage.height
      );
     
      var x = canvas.width / 2 - (self.currentImage.width / 2) * scale;
      var y = canvas.height / 2 - (self.currentImage.height / 2) * scale;
      self.context.drawImage(
        self.currentImage,
        x,
        y,
        self.currentImage.width * scale,
        self.currentImage.height * scale
      );
   
    };
  }

  @HostListener("window:scroll", ["$event.target"])
  scroll(e: any) {
    const html = document.documentElement;
    const canvas: any = document.getElementById("cc-4");
  

    this.iVisible = false;

    if (canvas.offsetTop < html.scrollTop) {
  
      this.textTop = this.WH - (html.scrollTop - canvas.offsetTop) / 5;
      this.opacityTop = (1 - this.textTop / this.WH) * 2;
      if (this.textTop < this.WH / 2) {
        this.textTop = this.WH / 2;
      }
  
      const scrollTop = html.scrollTop - canvas.offsetTop;
      const maxScrollTop = 3000; 
      const scrollFraction = scrollTop / maxScrollTop;
    
      const frameIndex = Math.min(
        this.frameCountBottle,
        Math.ceil(scrollFraction * this.frameCountBottle)
      );
      if (frameIndex <= this.frameCountBottle) {
        console.log(frameIndex);
     
        requestAnimationFrame(() => {
          this.updateImageBottle(frameIndex);
        });
      } else {
      }
    } else {
      this.textTop = this.WH;
      this.textTop2 = -1000;
      this.textTop3 = -1000;
      this.opacityTop2 = 0;
      this.opacityTop3 = 0;
    }
  }

  currentFrameHigh = (index: any) =>
    `/assets/images/can/Can_Splash_Scene_2_A.57.${(index + 1).toString()}.jpg`;

  currentFrameBottleHigh = (index: any) =>
    `/assets/images/bottle/Rotate_water_bottle.54.${(
      index + 1
    ).toString()}.jpg`;

  currentFrame = (index: any) =>
    `/assets/images/Can_landing_with_transition/can_landing_transition_0_${index.toString()}.jpg`;


  currentFrameBottle = (index: any) =>

    index <= 99
      ? `/assets/images/Home_page_last_anim/bottle 2_000${index.toString()}.jpg`
      : `/assets/images/Home_page_last_anim/bottle 2_00${index.toString()}.jpg`;

  preloadImages = () => {
    for (let i = 0; i < this.frameCountBottle; i++) {
      const img = new Image();
      img.src = this.currentFrameBottle(i);
    }
  };

  updateImageBottle = (index: any) => {
    this.currentImage.src = this.currentFrameBottle(index);
 
  };

  updateImage = (index: any) => {
    this.currentImage.src = this.currentFrame(index);

  };
}

.is-fixed {
  position: fixed;
  left: 50%;
  top: 50%;
  max-height: 100vh;
}

.canvas-container-4 {
  position: relative;
  width: 100%;
  height: 3000px;
}

.canvas-container-4 canvas {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;

}

.container-sticky {
  position: sticky;
  display: block;
  z-index: 1;
  left: 0px !important;
  text-align: left;
}

.canvas-text-2 {
  position: sticky;
  display: block;
  z-index: 1;
  color: white;
  font-size: 8vh;
  left: 0px !important;
  text-align: left;
  padding-left: 60px;
}

@media only screen and (orientation: portrait) {
  .canvas-container canvas {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;

  }

  .canvas-text-2 {
    position: sticky;
    display: block;
    z-index: 1;
    color: white;
    font-size: 5vh;
    text-align: center;
  }
}

<div class="canvas-container-4" id="cc-4" (scroll)="scroll($event)">
    <canvas id="can-slider-4"></canvas>
</div>