Bulma Container 在 canvas 中导致问题？

Question

我按照 here

中的建议创建了一个可绘制的 canvas

<!-- Part 1: Works -->
<canvas id='paint' width={250} height={250}/>

然后我把它移到一个容器里

<!-- Part 2: Offset! -->
<div class="container">
  <p class="notification is-info">Draw on the box provided</p>
  <canvas id='paint' width={250} height={250}/>
</div>

这会产生偏移问题：

JSFiddle here：（请全屏查看结果以查看偏移量）

是布尔玛问题还是我做错了什么？

Answer 1

我找到了解决办法：添加此 css 规则：

.container {
    position: static
}

我通过添加 20px 的边距来模拟这个 JSFiddle 中的效果，它会使指针偏移 20px。问题似乎是容器是 position: relative。如果更改为 static，问题就会消失。

希望对您有所帮助！

https://jsfiddle.net/9qxoa32y/

在这里您可以看到它的实际效果：

https://jsfiddle.net/woyvbe5L/embedded/result/

Bulma Container 在 canvas 中导致问题？

Bulma Container causing problem in canvas?

offset

bulma