绝对位置的容器大小以画布作为其子元素而计算错误

Question

我有一个canvas元素，包裹在绝对定位的div中：

body {
  position: relative;
  height: 100px;
}
.shape {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  background-color: green;
}

.shape > canvas {
  display: block;
  height: 100%;
}

<div class="shape">
  <canvas width="200" height="200"></canvas>
</div>

画布的比例为1x1。绝对放置的容器的高度为正文高度的100％，为100px。在这种情况下，画布的大小应为100x100px。因此，其父代绝对放置的容器的大小（应该用绿色填充）应该是。在Chrome浏览器中一切正常，但是Firefox忽略了画布元素的重新计算宽度，并使用其内联宽度值来调整父绝对放置容器的大小。为什么会这样？