Chrome assigning a random initial position to panzoom after page load

[Pedro]

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);
});