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.
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user