Firefox中CSS scale缩放Canvas元素出现抖动的解决方案咨询

在Firefox 121.0b9版本中，使用CSS scale 缩放Canvas元素时会出现轻微抖动现象，该问题在Safari和Chromium内核浏览器中不存在。以下是针对Firefox的几种解决思路：

解决办法 #

1. 使用Canvas上下文缩放替代CSS transform #

放弃CSS的scale变换，直接通过Canvas的2D上下文进行缩放操作，同时调整Canvas的显示尺寸匹配缩放效果，规避浏览器渲染层的精度问题。

修改后的示例代码：

<!DOCTYPE html>
<style>
  canvas {
    margin: 100px;
    width: 400px;
    height: 400px;
  }
</style>

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

<script>
  window.onload = function () {
    const elem = document.querySelector("canvas");
    const ctx = elem.getContext("2d");
    
    // 缓存原始绘制内容到离屏Canvas，避免重复绘制
    const offscreenCanvas = document.createElement('canvas');
    offscreenCanvas.width = elem.width;
    offscreenCanvas.height = elem.height;
    const offscreenCtx = offscreenCanvas.getContext('2d');
    offscreenCtx.fillStyle = "yellow";
    offscreenCtx.fillRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
    offscreenCtx.fillStyle = "black";
    offscreenCtx.fillRect(50, 50, 300, 300);

    // 缩放循环
    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
      const scale = 1 - 0.5 * t2;

      // 清空并缩放绘制离屏内容
      ctx.clearRect(0, 0, elem.width, elem.height);
      ctx.save();
      ctx.scale(scale, scale);
      ctx.drawImage(offscreenCanvas, 0, 0);
      ctx.restore();

      if (now < end) {
        requestAnimationFrame(tick);
      }
    };

    tick();
  };
</script>

2. 为Canvas添加渲染优化属性 #

给Canvas元素添加will-change: transform，提示Firefox提前为该元素创建独立渲染层，降低抖动概率：

canvas {
  margin: 100px;
  will-change: transform;
}

3. 对容器元素应用缩放变换 #

将Canvas包裹在容器div中，对容器使用scale变换，而非直接作用在Canvas上：

<div class="canvas-container">
  <canvas width="400" height="400"></canvas>
</div>

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

<script>
  // 变换目标改为容器元素
  const container = document.querySelector(".canvas-container");
  // 其余逻辑不变，将elem.style.transform替换为container.style.transform
</script>

4. 启用Firefox实验性布局特性 #

在Firefox地址栏输入about:config，找到layout.css.transform-box.enabled并设置为true，调整元素的变换盒模型，可能改善渲染精度。

相关Bug说明 #

Firefox Bugzilla中编号为663776的Bug记录了这类CSS变换在Canvas元素上的渲染精度问题，后续版本可能会修复该问题。

内容的提问来源于stack exchange，提问作者Michael