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.