Javascript 边缘未正确设置画布上的高度

我刚刚注意到Edge浏览器上有奇怪的行为，我花了很多时间弄清楚到底发生了什么。看起来，当您在画布上设置宽度和高度时，Edge将只设置宽度属性。检查以下代码：

var canvas = document.createElement('CANVAS');
canvas.width = 1020;
canvas.height = 150;

var w = canvas.getAttribute('width'); // gets 1020
var h = canvas.getAttribute('height'); // gets null

用铬/边打开下面的小提琴

解决方法是手动设置属性

canvas.setAttribute('height', canvas.height);

---

我发现了这一点，因为我们的ChartJs没有在Edge上正确渲染。但即使是最新版本的ChartJS也使用getAttribute方法。有人能给我解释一下发生了什么事吗？我在任何地方都没有发现报告的错误。

默认情况下，画布大小为300 x 150，因此当您将高度或宽度设置为默认大小时，它将被覆盖

因此，以下设置无效：

var canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 150;

document.getElementById('width').innerHTML = canvas.getAttribute('width');
document.getElementById('height').innerHTML = canvas.getAttribute('height');

但是，如果您可以设置高度或宽度而不是默认值，那么它应该反映并在Edge和Chrome中工作

var canvas = document.createElement('canvas');
canvas.width = 1020;
canvas.height = 151;

document.getElementById('width').innerHTML = canvas.getAttribute('width');
document.getElementById('height').innerHTML = canvas.getAttribute('height');

---

这确实是一个bug，但我真的很想知道为什么chartJS会使用HTML属性而不是DOM IDL属性。。。他们会用这个字符串做什么？我从CDN打开了ChartJS文件，有一条评论告诉我们，如果它是默认值，那么这个值就是null（第10617行）。但是它在Chrome上工作。我实际上也是这样。我没有仔细阅读，但听起来他们使用它来查看画布大小是否设置为默认值以外的值，并确定是否应该使用默认值？听起来真是糟糕的设计。。。您可能想向ChartJS提出一个问题，关于此测试在默认大小的Edge上失败。