[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:
@@ -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(() => {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
sizeAprsMapToViewport();
|
||||||
aprsMap.invalidateSize();
|
aprsMap.invalidateSize();
|
||||||
aprsMap.setView([lat, lon], 13);
|
aprsMap.setView([lat, lon], 13);
|
||||||
}, 50);
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -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;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user