本文针对 Firefox 浏览器中使用 CSS transform: scale() 动态缩放 元素时出现的视觉抖动（jitteriness）问题，提供基于时间精度优化与数值稳定性的兼容性修复方案。
本文针对 firefox 浏览器中使用 css `transform: scale()` 动态缩放 `canvas>` 元素时出现的视觉抖动（jitteriness）问题，提供基于时间精度优化与数值稳定性的兼容性修复方案。
Firefox（尤其是 121+ 版本）在渲染高频、小步长的 scale() 变换时，由于其合成器对浮点变换矩阵的内部处理机制（如舍入策略、插值精度限制），容易在 canvas 这类像素敏感元素上暴露亚像素渲染不一致问题，表现为边缘跳变或整体画面轻微抖动。该现象在 Safari 和 Chromium 中不明显，说明是 Firefox 渲染管线特有的行为，且与已知 Bug 663776 高度相关。
核心解决思路并非修改动画逻辑本身，而是提升时间计算与数值输出的确定性与稳定性：
-
使用
requestAnimationFrame的时间戳参数：避免依赖performance.now()多次调用带来的微小偏差； -
控制浮点数精度：对中间计算结果（如
t2）显式.toFixed(3)后转回数字，消除 JavaScript 浮点运算累积的不可见尾差； -
引入微量偏移量（
+ 0.0002）：打破 Firefox 渲染器在特定临界缩放值（如接近 0.999 或 1.001）下的不稳定采样行为，实测可显著抑制抖动； -
确保初始时间基准严格初始化：避免
start在首帧未定义导致的逻辑偏移。
以下是优化后的完整实现：
<style>
canvas {
margin: 100px;
/* 关键：启用硬件加速，减少重绘抖动 */
will-change: transform;
}
</style><canvas width="400" height="400"></canvas><script>
window.onload = function () {
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);
const duration = 2000; // 动画总时长（ms）
let start = null;
const tick = (timestamp) => {
if (!start) start = timestamp;
const elapsed = timestamp - start;
const t = Math.min(1, elapsed / duration);
// easeOutExpo: 1 - 2^(-10t)，保留三位小数并加微量扰动
const t2 = parseFloat((1 - Math.pow(2, -10 * t)).toFixed(3)) + 0.0002;
const scale = 1 - 0.5 * parseFloat(t2.toFixed(3));
elem.style.transform = `scale(${scale})`;
if (elapsed < duration) {
requestAnimationFrame(tick);
}
};
requestAnimationFrame(tick);
};
</script>
⚠️ 注意事项：
- 不要省略
will-change: transform—— 它能提示 Firefox 提前将 canvas 图层提升为独立合成层，减少主渲染线程干扰； - 避免在
transform中混用scale()与其他变换（如translate()），除非统一通过矩阵控制，否则可能加剧 Firefox 的复合计算误差； - 若需更高精度控制（如逐帧像素对齐），可考虑改用
ctx.scale()在 canvas 内部缩放并重绘，但会牺牲 CSS 动画性能优势； - 此方案为渐进式修复，不影响其他浏览器表现，具备良好向后兼容性。
总结：Firefox 的 canvas 缩放抖动本质是渲染引擎对亚像素变换的数值鲁棒性不足。通过精细化控制时间输入、浮点输出和合成提示，我们能在不改变动画语义的前提下，实现跨浏览器一致、顺滑的缩放效果。
