Edge与Brave中Canvas未设display:block时溢出屏幕问题排查

问题原因 #

canvas元素默认是inline-block类型，浏览器会为这类元素保留基线对齐的额外间隙（类似行内元素的行高留白），再加上body标签默认存在的margin值，最终导致页面出现滚动条，视觉上表现为canvas溢出屏幕。

解决方案 #

以下几种方式均可解决问题，按需选择即可：

方案1：将canvas设为块级元素（最直接） #

给canvas添加display:block属性，消除行内块元素的基线间隙：

canvas {
  display: block;
  margin: 0;
  padding: 0;
}

方案2：重置body边距并调整canvas垂直对齐 #

若不想修改canvas的display属性，可通过重置body默认margin，同时将canvas垂直对齐方式改为顶部来消除间隙：

body {
  margin: 0;
}
canvas {
  vertical-align: top;
}

方案3：全局样式重置 #

引入极简的全局样式重置，消除所有元素的默认margin、padding，同时统一盒模型，避免额外间隙：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
canvas {
  vertical-align: top;
}

适配屏幕的补充设置 #

要让canvas完全适配屏幕且无滚动条，还需确保canvas尺寸与视口一致，可通过JavaScript动态设置：

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  // 此处可添加画布内容重绘逻辑
}

// 初始化及窗口大小变化时重新调整
resizeCanvas();
window.addEventListener('resize', resizeCanvas);

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