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 😁

[RahulSabinkar]

I can confirm this fix works. I used it on my own Astro powered website. Though instead of fixing it via JS function, we can also do it by just adding this line at the end of our global.css styling file.

/* Rough Notation Fix */
@keyframes rough-notation-dash {
  to {
    stroke-dashoffset: 0;
  }
}

Thanks for the fix! @Pedromigacz