[fix](trx-frontend-http): use double-rAF for map sizing after tab visibility change

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
2026-04-20 00:51:34 +02:00
parent c92428b78b
commit 7178ebeb23
2 changed files with 21 additions and 6 deletions
@@ -4485,7 +4485,16 @@ function _initMapWhenReady() {
if (loadingEl) loadingEl.classList.add("is-hidden"); if (loadingEl) loadingEl.classList.add("is-hidden");
window.trx.map.initAprsMap(); window.trx.map.initAprsMap();
window.trx.map.sizeAprsMapToViewport(); window.trx.map.sizeAprsMapToViewport();
if (window.trx.map.aprsMap) setTimeout(() => window.trx.map.aprsMap.invalidateSize(), 50); // The map panel was just made visible (display:none → ""); the browser
// may not have laid it out yet, so getBoundingClientRect() can return
// stale/zero dimensions. Double-rAF ensures a full layout pass has
// completed before we re-measure and tell Leaflet about its real size.
requestAnimationFrame(() => {
requestAnimationFrame(() => {
window.trx.map.sizeAprsMapToViewport();
if (window.trx.map.aprsMap) window.trx.map.aprsMap.invalidateSize();
});
});
return; return;
} }
// Not ready yet — show overlay and poll until both are available. // Not ready yet — show overlay and poll until both are available.
@@ -1848,10 +1848,13 @@
initAprsMap(); initAprsMap();
sizeAprsMapToViewport(); sizeAprsMapToViewport();
if (aprsMap) { if (aprsMap) {
setTimeout(() => { requestAnimationFrame(() => {
aprsMap.invalidateSize(); requestAnimationFrame(() => {
aprsMap.setView([lat, lon], 13); sizeAprsMapToViewport();
}, 50); aprsMap.invalidateSize();
aprsMap.setView([lat, lon], 13);
});
});
} }
}; };
@@ -1896,6 +1899,7 @@
const center = locatorMarkerCenter(marker); const center = locatorMarkerCenter(marker);
const focusMarker = () => { const focusMarker = () => {
if (!aprsMap || !marker) return; if (!aprsMap || !marker) return;
sizeAprsMapToViewport();
aprsMap.invalidateSize(); aprsMap.invalidateSize();
if (center) { if (center) {
const targetZoom = Math.max(aprsMap.getZoom() || 0, 7); const targetZoom = Math.max(aprsMap.getZoom() || 0, 7);
@@ -1910,7 +1914,9 @@
if (typeof marker.openPopup === "function") marker.openPopup(); if (typeof marker.openPopup === "function") marker.openPopup();
}; };
focusMarker(); focusMarker();
setTimeout(focusMarker, 60); requestAnimationFrame(() => {
requestAnimationFrame(focusMarker);
});
return true; return true;
}; };