From b7bfd396528856837908f45fc955b01eebfa059e Mon Sep 17 00:00:00 2001 From: rouggy Date: Sat, 25 Jul 2026 13:30:43 +0200 Subject: [PATCH] fix(zoom): hide Leaflet tile seams that appear when the map is CSS-zoomed Under our CSS zoom the map tiles scale by a fractional factor, opening ~1px gaps between adjacent tiles that read as a faint grid over the map. Tag the document with data-uizoom and, only while zoomed, enlarge each 256px tile by 1px so neighbours overlap and cover the seams. The 100% view is untouched. --- frontend/src/App.tsx | 3 +++ frontend/src/style.css | 10 ++++++++++ 2 files changed, 13 insertions(+) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index c89a1d2..86eff25 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -860,6 +860,9 @@ export default function App() { const apply = () => { // Zoom the whole document (so portalled menus/modals/tooltips scale too)… (document.documentElement.style as any).zoom = String(z); + // Flag the zoom state so the Leaflet tile-seam fix (style.css) only kicks in + // when actually zoomed (fractional scaling opens 1px gaps between tiles). + document.documentElement.setAttribute('data-uizoom', String(z)); // …and counter-size the app root: `zoom` doesn't rescale vh/vw, so a 100vh // root leaves an empty strip when zoomed out. (100/z)vh zoomed by z = 100vh. const el = appRootRef.current; diff --git a/frontend/src/style.css b/frontend/src/style.css index 5b3d2b9..e0dd8f0 100644 --- a/frontend/src/style.css +++ b/frontend/src/style.css @@ -652,3 +652,13 @@ border: 2px solid var(--background); } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } + +/* When the UI is CSS-zoomed (our persistent Ctrl+wheel zoom), map tiles are + scaled by a fractional factor, which opens ~1px seams between adjacent tiles + (visible as a faint grid over the map). Enlarging each 256px tile by 1px makes + neighbours overlap just enough to hide the seams. Scoped to the zoomed state so + it never touches the crisp 100% view. */ +html[data-uizoom]:not([data-uizoom="1"]) .leaflet-tile { + width: 257px !important; + height: 257px !important; +}