Chrome 中的 CSS 调整大小句柄和鼠标事件

Question

这个问题在这里已经有了答案:





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

(1 个回答)


2年前关闭。




玩弄 resize CSS 的属性，我偶然发现了这个问题。我有一个包含 Canvas 的 div。

.resizable {
  resize: both;
  overflow: hidden;
  border: 1px solid black;
}

div {
  height: 300px;
  width: 300px;
}

canvas {
  height: 100%;
  width: 100%;
}

<div class="resizable">
  <canvas></canvas>
</div>  

在 Chrome 76 的此配置中，无法调整 div 的大小。拖动调整大小 handle 没有任何作用。 (它适用于 Firefox)

如果我禁用 pointer-events在 Canvas 上，或者如果我把 Canvas 变小，它就可以工作: https://jsfiddle.net/t085nv9r/ .

我猜这是因为当它的大小设置为父级的 100% 时， Canvas 会掩盖句柄。但是，我的理解是该事件应该冒泡到父级，因此无论 Canvas 捕捉到什么事件(如果没有 stopPropagation)，div 也应该接收它并且调整大小将发生。

我做错了什么？

编辑:将溢出设置为 scroll向 div 添加滚动条，这使得 Canvas 不会覆盖整个 div 并且 handle 工作正常。但这对我来说不是解决方案。我宁愿在我的 div 中没有无用的滚动条。

Answer 1

可以尝试这样的事情:

canvas {
  height: calc(100% - 20px);
  width: calc(100% - 20px);
}