Chrome特定分辨率下CSS transform变换的Canvas无法完整渲染咨询

运行下述代码后，会在页面固定位置生成3行3列的10px见方纯色Canvas方块矩阵，外层容器通过transform: scale(10)做整体缩放。

• 页面基础结构：

  <body>
  <div id="canvas_div"></div>
  </body>
  

• 核心逻辑代码：

  let colors = [
      ['#000','#00F','#0F0'],
      ['#0FF','#F00','#F0F'],
      ['#FF0','#FFF','#000']
  ]
  
  let canvas_div = document.getElementById('canvas_div');
  canvas_div.style.position = "fixed";
  canvas_div.style.top = "50%";
  canvas_div.style.left = "50%";
  canvas_div.style.width = "0";
  canvas_div.style.height = "0%";
  canvas_div.style.transform = "scale(10) translate(-20px,-20px)";
  
  for (i = 0; i < 3; i++){
      for (j = 0; j < 3; j++){
          let canvas = document.createElement('canvas');
          canvas.width = 100;
          canvas.height = 100;
          canvas.style.position = "fixed";
          canvas.style.top = `${i * 10}px`;
          canvas.style.left = `${j * 10}px`;
          canvas.style.width = "10px"
          canvas.style.height = "10px"
          let context = canvas.getContext("2d");
          context.fillStyle = colors[i][j];
          context.fillRect(0, 0, 100, 100);
          canvas_div.appendChild(canvas);
      }
  }
  

• 基础规律：Firefox浏览器中渲染完全符合预期；Chrome浏览器中只有当视口宽、高两个轴的尺寸都为奇数像素时，渲染效果才正常。
• 触发方式：如果初次打开没有出现异常，可调整预览窗口、浏览器窗口尺寸，或拖动开发者工具面板改变视口大小，当文档宽度为偶数时即可触发错位问题。
• 现象细节：
  • 预期效果为对齐整齐的3*3纯色方块矩阵，每个方块边缘完全贴合，没有错位缝隙。
  • 异常状态下，方块会出现渲染偏移，色块边缘不对齐，和元素本身的布局边界产生错位，无法在自身元素范围内完整渲染。
  • 通过开发者工具校验可以确认，每个Canvas元素的实际布局尺寸、位置参数都和代码设置完全一致，不存在布局计算错误。

该渲染异常是Chrome浏览器的渲染逻辑bug，还是代码编写者对CSS属性、Canvas API的理解存在偏差导致的？

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