Chrome assigning a random initial position to panzoom after page load
freenandes opened this issue · comments
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);
});