Rought notation refuses to render more then once after SPA page swap

[Pedromigacz]

I'm using astro with the <ViewTransitions /> / <ClientRouter /> . If I disabled it, the rought notation script runs normally.

First render:

What I get after the first page swap:

Important to note that the svg does in fact exists. the paths are on the correct place, but they are invisible:

If I just resize the browser or the window, the paths become visible again.

Things I've tried

1. Using annotationGroup(annotations).hide(); to perform a "cleanup". It did not work.
2. Trying to remove the svgs before changing pages with a normal query selector. It did not work.
3. Trying to mess with the stroke-dashoffset: 178.486px; stroke-dasharray: 178.486px; properties of each path on each svg, by querySelecting them and performing the operation. It did not work.
4. Disabling the <ViewTransitions /> / <ClientRouter />. It does work but I don't want to deploy it thay way.

[Pedromigacz]

Upon further investiontaion, I just had to add this style back:

  function addRequiredStyles() {
    const style = document.createElement("style");
    style.textContent = `
@keyframes rough-notation-dash {
  to { stroke-dashoffset: 0; }
}`;
    document.head.appendChild(style);
  }

I offer to maintain this package if you want 😁