Stop the map's tiles showing dark lines while zooming

[ryanbarlow97]

What

Follow-up to #111. Panning is clean since #111, but zooming (wheel, pinch, +/- keys) still showed a grid of dark lines along the tile edges.

Why

Mid-zoom the content is scaled past its resting zoom, so every tile edge lands between pixels. At rest a tile's size still goes through CSS zoom and layout rounding, so an edge can end ~0.02 px short of the pixel. Chrome's edge antialiasing lets about a quarter of such a pixel through either way, and the page behind showed.

Fix

• Opaque tile layers (base, realm colours, the staff maps) reach 1 screen px under their right and bottom neighbours at rest and 2 px mid-zoom. The neighbour is drawn after (on top), so the strip is only ever seen through its antialiased edge. It's done with the CSS scale property and a --map-live-scale variable that useMapViewport sets per frame (data-scaling), so the overlap stays the same size on screen through the gesture. Positions moved from transform to the translate property so the scale composes about the tile's own corner.
• The backdrop runs on 8 px under the sharp tiles' edge (its clip-path hole is inset), which covers the sharp tiles' left and top outer edges.
• See-through rasters (seeThrough, the province modes such as prosperity, ~40 % partial alpha) keep exact edges: an overlap would show twice as deep.

Checked

Chromium against live data, solid-black tiles on white, worst line darkness that is a tile seam (remaining peaks are map/panel edges):

	main (5672587)	this PR
dpr 1.25, wheel zoom in / out mid-gesture	36 % / 46 %	≤ 4 %
dpr 1.25, keyboard zoom mid-transition	24 %	≤ 4 %
dpr 1.5, multi-tick zoom	up to 49 %	≤ 4 %
dpr 1 / 2	–	≤ 4 % / ≤ 7 % (header edge)
drag, all of the above	≤ 3 %	≤ 4 %

tsc clean; 1,434 map/viewport/admin/chronicle tests pass (new: opaque tiles overlap and inset the backdrop hole, see-through ones don't).

🤖 Generated with Claude Code

[coderabbitai]

Warning

Review limit reached

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Next included review available in 8 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

• Configuration used: Organization UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: bc105f45-369d-4b56-bd54-906db68fc1e6

📥 Commits

Reviewing files that changed from the base of the PR and between 37078ff and 2f48568.

📒 Files selected for processing (5)

• frontend/app/components/map/MapCanvas.tsx
• frontend/app/components/map/TileLayer.test.tsx
• frontend/app/components/map/TileLayer.tsx
• frontend/app/hooks/useMapViewport.ts
• frontend/app/internal/globals.css

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}