Firefox jumpiness involving CSS scale and canvas – Blancer.com Tutorials and projects

In Firefox (121.0b9), when scaling canvas elements, I notice slight jitteriness. I don’t experience this in Safari or Chromium. Is there a way to work around this in Firefox?

Here’s an example (JSFiddle). (If you’re on macOS, activate “Use scroll gesture with modifier keys to zoom” to zoom in on the bottom right corner. On JSFiddle, when you’re zoomed in, use “Command + Enter” to rerun.)

<!DOCTYPE html>

<style>
  canvas {
    margin: 100px;
  }
</style>

<canvas width="400" height="400" />

<script>
  window.onload = function () {
    // make canvas
    const elem = document.querySelector("canvas");
    const ctx = elem.getContext("2d");
    ctx.fillStyle = "yellow";
    ctx.fillRect(0, 0, elem.width, elem.height);
    ctx.fillStyle = "black";
    ctx.fillRect(50, 50, 300, 300);

    // scale loop
    const start = performance.now();
    const end = start + 2000;

    const tick = () => {
      const now = performance.now();
      const t = Math.min(1, (now - start) / (end - start));
      const t2 = 1 - Math.pow(2, -10 * t); // easeOutExpo
      elem.style.transform = `scale(${1 - 0.5 * t2})`;
      if (now < end) {
        requestAnimationFrame(tick);
      }
    };

    tick();
  };
</script>