Bulma Контейнер вызывает проблемы в холсте?

Question

Я создал холст для рисования, как предложено в здесь

<!-- 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 здесь : (Пожалуйста, просмотрите результаты в полноэкранном режиме, чтобы увидеть смещение)

Это проблема с булмойили я что-то не так делаю?

Answer 1

Я нашел исправление: добавлю это правило css:

.container {
    position: static
}

Я смоделировал эффект в этом JSFiddle, добавив поле в 20px, оно сместит указатель на 20px.Кажется, проблема в том, что контейнер position: relative.Если изменить на static, проблема исчезнет.

Надеюсь, это поможет!

https://jsfiddle.net/9qxoa32y/

И здесь вы можете увидеть это в действии:

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