mousemove Event Listener not working when cursor is in front of a

i have a script which adds a trail to the cursor, its controlled via event listeners and Canvas, it works fine except when hovering over an iframe, in which instance the trail stops and mousemovements are no longer being reported until the mouse stops hovering over the iframe.

I have tried adding extra event listeners to specifically handle when hovering over an iframe to no avail, and I have also tried seeing if there was an issue with Z-indexxing and the canvas, however this did not fix any errors.

As an extra note, I cannot add pointer-events:none; to the iFrame, as that would disallow users to communicate with the embedded content, which is crucial for my use instance (vimeo).

my code is as seen below:

// Check if the user agent contains 'iPhone' or 'iPad'
if (/(iPhone|iPod|iPad)/.test(navigator.userAgent)) {
    console.log("no trail.");
} else {

    const canvas = document.querySelector("canvas");
const ctx = canvas.getContext('2d');

// for intro motion
let mouseMoved = false;

const pointer = {
    x: .5 * window.innerWidth,
    y: .5 * window.innerHeight,
}
const params = {
    pointsNumber: 40,
    widthFactor: .3,
    mouseThreshold: .6,
    spring: .3,
    friction: .5
};

const trail = new Array(params.pointsNumber);
for (let i = 0; i < params.pointsNumber; i++) {
    trail[i] = {
        x: pointer.x,
        y: pointer.y,
        dx: 0,
        dy: 0,
    }
}

window.addEventListener("click", e => {
    updateMousePosition(e.pageX, e.pageY);
});
window.addEventListener("mousemove", e => {
    mouseMoved = true;
    updateMousePosition(e.pageX, e.pageY);
});
window.addEventListener("touchmove", e => {
    mouseMoved = true;
    updateMousePosition(e.targetTouches[0].pageX, e.targetTouches[0].pageY);
});

function updateMousePosition(eX, eY) {
    pointer.x = eX;
    pointer.y = eY;
}

setupCanvas();
update(0);
window.addEventListener("resize", setupCanvas);


function update(t) {

    ctx.strokeStyle = '#ff5800';

    // for intro motion
    if (!mouseMoved) {
        pointer.x = (.5 + .3 * Math.cos(.002 * t) * (Math.sin(.005 * t))) * window.innerWidth;
        pointer.y = (.5 + .2 * (Math.cos(.005 * t)) + .1 * Math.cos(.01 * t)) * window.innerHeight;
    }

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    trail.forEach((p, pIdx) => {
        const prev = pIdx === 0 ? pointer : trail[pIdx - 1];
        const spring = pIdx === 0 ? .4 * params.spring : params.spring;
        p.dx += (prev.x - p.x) * spring;
        p.dy += (prev.y - p.y) * spring;
        p.dx *= params.friction;
        p.dy *= params.friction;
        p.x += p.dx;
        p.y += p.dy;
    });

    ctx.lineCap = "round";
     ctx.beginPath();
    ctx.moveTo(trail[0].x, trail[0].y);

    for (let i = 1; i < trail.length - 1; i++) {
        const xc = .5 * (trail[i].x + trail[i + 1].x);
        const yc = .5 * (trail[i].y + trail[i + 1].y);
        ctx.quadraticCurveTo(trail[i].x, trail[i].y, xc, yc);
        ctx.lineWidth = params.widthFactor * (params.pointsNumber - i);
        ctx.stroke();
    }
    ctx.lineTo(trail[trail.length - 1].x, trail[trail.length - 1].y);
    ctx.stroke();
    
    window.requestAnimationFrame(update);
}

function setupCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}

}

body{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  max-width: 100%;
  overflow-x: hidden;
}

#trail{
  position: absolute;
  pointer-events: none;
  z-index: 9999999999999999;
  -webkit-filter: drop-shadow(0px 0px 5px rgb(255, 255, 255));
  filter: drop-shadow(0px 0px 5px rgb(255, 255, 255));
  width: 100%;
  height: 100%;
}

<iframe src="https://www.example.com" title="Test iFrame">
</iframe>

<canvas id="trail"></canvas>