input offset in canvas when using bootstrap4

[JHerseth]

Hi, I have a deck where I've used bootstrap4 to style my cards. I'm trying to incorporate your canvas script into my deck, but for some reason the input gets offset when the ac-front div is placed inside a bootstrap column. Do you have any idea why that is?

<div class="container">
  <div class="row">
    <div class="col">X</div>
  </div>
  <div class="row"
    <div class="col">
      <div id="ac-front"></div>
    </div>
  </div>
</div>

edit: if the canvas is in the first row, there is no offset, but offset increases for each row below the first one the canvas is placed.

edit2: After some more googleing and messing around, it seems the culprit is position:relative. I've overridden these in my stylesheet, and things seem to be working well now.

div[class^="col"]{
  position: static;
}
div[class^="card"]{
  position: static;
}

[pigoz]

Hi, sorry for the delayed reply. The styles I apply are very minimal:

https://github.com/pigoz/anki-canvas/blob/master/src/styles.ts

Why would position relative cause strange behavior?

[JHerseth]

Honestly, it's a bit beyond my skill level. When googleing I came upon multiple people with similar problems when drawing on a canvas. Like this: https://stackoverflow.com/questions/25934607/bootstrap-offset-and-html5-canvas https://stackoverflow.com/questions/59238107/canvas-drawing-is-offset-with-correct-attribute-setting

Most interesting is maybe this quote:

This is caused by the position: relative that is in the CSS class definition of card. This means that this.offsetLeft and this.offsetTop are not given with respect to the viewport, but to the card element (and thus give smaller values than expected).

Anyways, the problem is solved for me, but maybe this could help you to make your code more robust?

[pigoz]

Thank you for reporting, the code was indeed broken.