修改HTMLCanvasElement内部尺寸引发页面布局异常问题问询

问题背景 #

HTML元素存在两种尺寸：

内在尺寸（通过JS修改的.width和.height属性）和显示尺寸（由CSS的width与height属性控制）

动态创建的Canvas设置了CSS宽高为100%，通过ResizeObserver监听device-pixel-content-box尺寸变化，同步修改Canvas的内在尺寸以匹配设备像素盒大小。但在系统显示缩放设为125%且页面左侧滚动条可见时，出现Canvas持续收缩的异常，浏览器内缩放125%则无此问题。需求是修改Canvas内在尺寸时不触发页面重排。

问题原因 #

1. 系统缩放的舍入误差：125%属于非整数倍系统缩放，CSS像素与设备像素转换时会产生小数。修改Canvas内在尺寸（设备像素级）后，浏览器布局计算可能因舍入误差导致显示尺寸微小变化，再次触发ResizeObserver回调，形成循环收缩。
2. 布局依赖链：Canvas父容器采用百分比尺寸，且页面存在滚动条时，Canvas内在尺寸的修改可能间接影响父容器的布局计算，导致重排并触发监听回调。

解决方案 #

1. 增加尺寸差异阈值，避免循环触发 #

在ResizeObserver回调中，仅当目标尺寸与当前Canvas内在尺寸的差异超过合理阈值（如1px）时，才执行修改操作，过滤掉舍入误差导致的微小尺寸变化。

修改后的JS代码：

let container = document.getElementById("editor")

let canvas = document.createElement("canvas");
let context = canvas.getContext('2d');

let st = canvas.style;
st.width = "100%";
st.height = "100%";
st.outline = "none";
// 触发硬件加速，分离内在尺寸与显示尺寸的计算
st.willChange = "contents";
st.transform = "translateZ(0)";

const observer = new ResizeObserver((entries) => {
    for (const entry of entries) {
        if (entry.target === canvas) {
            let size = entry.devicePixelContentBoxSize[0];
            // 对设备像素尺寸取整，避免小数波动
            const targetWidth = Math.round(size.inlineSize);
            const targetHeight = Math.round(size.blockSize);
            
            // 仅当尺寸差异超过1px时才更新
            if (Math.abs(canvas.width - targetWidth) > 1 || Math.abs(canvas.height - targetHeight) > 1) {
                console.log(`w = ${targetWidth}, h = ${targetHeight}`);
                canvas.width = targetWidth;
                canvas.height = targetHeight;
                context.fillStyle = "green";
                context.fillRect(0, 0, targetWidth, targetHeight);
            }
        }
    }
});
observer.observe(canvas, {box: "device-pixel-content-box"});
container.appendChild(canvas)

2. 触发硬件加速，分离布局计算 #

给Canvas添加will-change: contents和transform: translateZ(0)样式，让浏览器将Canvas的渲染层独立，减少内在尺寸修改对布局的影响，避免不必要的重排。

3. 固定父容器布局约束 #

确保Canvas的父容器（#editor）有明确的布局边界，比如添加overflow: hidden避免滚动条尺寸变化影响布局：

#editor {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

关键说明 #

• 系统缩放与浏览器内缩放的计算逻辑不同：系统缩放是设备级的像素映射，容易产生小数尺寸；浏览器内缩放是CSS级的缩放，计算时会对尺寸做更平滑的处理，因此不会触发循环。
• 修改Canvas内在尺寸理论上不会触发重排，但在复杂布局（百分比容器+滚动条+非整数缩放）下，浏览器的布局优化可能失效，通过上述方法可规避此类边缘场景问题。

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