IOS devices doesnt load html5 canvas

I have html 5 canvas on my page, I throw images into it with javascript and I make them play with scroll. While it works smoothly on android devices and desktop devices, only white screen comes up on iphones, what could be the reason for this?

Html

<section class="anvideo">
      <canvas id="hero-lightpass" />
</section>

Javascript

var image = document.getElementById("canvasImage");
var mobileImage = document.getElementById("canvasMobileImage");
var imageWidth = image.width;
var imageHeight = image.height;
console.log(imageWidth + " - " + imageHeight);

const canvas = document.getElementById("hero-lightpass");
const context = canvas.getContext("2d");

canvas.width = imageWidth;
canvas.height = imageHeight;
image.style.display = "none";
mobileImage.style.display = "none";


const frameCount = 64;
const currentFrame = index => (
    `/images/${(index + 1).toString().padStart(3, '0')}.png`
);

const images = []
const airpods = {
    frame: 0
};

for (let i = 0; i < frameCount; i++) {
    const img = new Image();
    img.src = currentFrame(i);
    images.push(img);
}

gsap
    .timeline({
        onUpdate: render,
        scrollTrigger: {
            trigger: ".scroll-sequence__container",
            scrub: 1,
            start: "top top",
            end: "center",
        }
    })

    .to(
        airpods,
        {
            frame: frameCount - 1,
            snap: "frame",
            ease: "none",
            duration: 3
        },
        0
    )

images[0].onload = render;

function render() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.drawImage(images[airpods.frame], 0, 0, canvas.width, canvas.height);
}