Chrome assigning a random initial position to panzoom after page load

[freenandes]

Hi! Firefox and Safari seem okay with it, but Chrome assigns a random initial position to panzoom. It's very random, very strange.

Sometimes it lands exactly where I defined it, but the worse is when it "throws" the content outside the viewport, returning an empty viewport. I have to pan and discover where the content is. But usually, it just misses the initial position.

I have this structure, but i have no idea how it turned out like this because i tried removing and pasting multiple times, tweaking the options and the randomness continues:

import panzoom from 'panzoom';
const canvas = document.getElementById('canvas') as HTMLElement;
const inputElements = document.querySelectorAll('input, textarea, button, a');
const pz = panzoom(canvas, {
    maxZoom: 4,
    minZoom: 0.125,
    zoomDoubleClickSpeed: 1,
});
pz.zoomAbs(-48, -48, 0.5);
inputElements.forEach((input) => {
    input.addEventListener('focus', () => {
        pz.pause();
    });
    input.addEventListener('blur', () => {
        pz.resume();
    });
    input.addEventListener('touchstart', (event) => {
        event.stopPropagation();
    });
});
document.addEventListener('touchstart', (event) => {
    const isInputFocused = Array.from(inputElements).some((input) =>
        input.contains(event.target as Node)
    );
    if (!isInputFocused) {
        pz.resume();
    }
});
window.addEventListener('load', function() {
    setTimeout(function() {
        const overlay = document.querySelector('.preloader');
        overlay?.classList.add('hidden');
        const articleElements = document.querySelectorAll('article');
        articleElements.forEach((article) => {
        const img = article.querySelector('img');
        if (img) {
            const title = img.getAttribute('title');
            if (title) {
                const titleElement = document.createElement('small');
                titleElement.textContent = title;
                img.insertAdjacentElement('afterend', titleElement);
            }
        }
        });
    }, 500);
});