webkit css 调整大小不适用于 canvas 作为 child？

Question

假设以下 html 和 css 代码片段：

#outer {
  width: 100px;
  height: 100px;
  overflow: hidden;
  resize: both;
  border: 1px solid black;
}
#inner {
  width: 100%;
  height: 100%;
}

<div id="outer">
  <canvas id="inner"></canvas>
</div>

我希望 div 可以调整大小，在 Firefox 中确实如此。然而在 webkit-based 浏览器中，例如 chrome 和 opera，它不是。但是，如果我用 div 替换内部 canvas，它也可以在那里工作。所以我的问题是：为什么 canvas 元素在这种情况下会阻止外部 div 调整大小？我该如何解决这个问题？

Answer 1

似乎 canvas 正在处理阻止调整大小的鼠标事件。如果您在 canvas 上考虑 pointer-events:none，它将起作用：

#outer {
  width: 100px;
  height: 100px;
  overflow: hidden;
  resize: both;
  border: 1px solid black;
}
#inner {
  width: 100%;
  height: 100%;
  pointer-events:none
}

<div id="outer">
  <canvas id="inner"></canvas>
</div>

为了更好地说明，稍微减小 canvas 的大小以避免与调整大小小部件重叠，它也可以工作：

#outer {
  width: 100px;
  height: 100px;
  overflow: hidden;
  resize: both;
  border: 1px solid black;
}
#inner {
  width: 100%;
  height: calc(100% - 10px);
  background:red;
}

<div id="outer">
  <canvas id="inner"></canvas>
</div>

你也可以玩 z-index:

#outer {
  width: 100px;
  height: 100px;
  overflow: hidden;
  resize: both;
  border: 1px solid black;
  position:relative;
  z-index:0; /* mandatory to create a stacking context and keep the canvas inside */
}
#inner {
  width: 100%;
  height: 100%;
  position:relative;
  z-index:-1;
  background:red;
}

<div id="outer">
  <canvas id="inner"></canvas>
</div>

webkit css 调整大小不适用于 canvas 作为 child？

webkit css resize doesn't work with canvas as child?

html

css

webkit

html5-canvas