Transform quality at extreme zoom levels

[christian-byrne]

I noticed that at extreme zoom levels (>5x or <0.2x), transforms can show pixelation/stretching artifacts since its just showing the scaled already-rasterized layer.

Looking at Transform.vue:

transform: `translate(${viewport.value.x}px,${viewport.value.y}px) scale(${viewport.value.zoom})`

Would it work to force a reflow/re-rasterization at certain zoom thresholds? For example, triggering a brief style change or changing Vue key -- to forcee the browser to re-rasterize the transform layer:

// At zoom threshold crossings (e.g., 2x, 4x, 8x)
if (crossedThreshold) {
  // Force re-rasterization
  element.style.willChange = 'auto'
  element.offsetHeight // Force reflow
  element.style.willChange = 'transform'
}

The idea being to get fresh rasterization at the new scale and avoiding ever stretching the original raster map too much.

[christian-byrne]

I saw that Figma and threejs are forcing the reflow after there is an zoom/pan interaction + short delay (throttled). It seems a lot better actually. I wonder how else it can be optimized.

[christian-byrne]

If anyone is wondering, I solved it by using the above method (after any zoom or pan, if interactrion has settled for ~200ms -> force single reflow)

2025-08-20.23-33-19_processed_20250820_233343.mp4