[Bug] Positioning is wrong when transform: scale() is used

[sinedied]

I'm using RemarkJS to create my slides, and I would love to use Rough notation to highlight parts of my talk!

When I tried to integrate it, I noticed the positioning was wrong and tried to understand why: remark use a "scaler" container to always have the slides centered with the same aspect ratio, and it uses transform: scale() to achieve that.

When the scale value is different than 1, the Rough notation positioning is shifted.

I would love to know if you are aware of any workaround!

Thanks

[sinedied]

I made a small and imperfect workaround for now, everytime I create an annotation, I apply to the SVG the inverse of the scale transform:

  // Fix scale
  const scaler = document.querySelector('.remark-slide-scaler');
  const scale = Number(/scale\((\d+\.?\d*)\)/.exec(scaler.style.transform)[1]);
  annotation._svg.style.transform = `scale(${1/scale})`;

It doesn't get updated through resize, but it's fine for my use case. Would love to see a more robust solution though!