Notation becomes visible only after resizing window with Chrome and MS Edge

[igufi]

I've been working on getting around issue #36 by adding unique IDs for each span of highlights I want to paint:

<script type="module">
      import { annotate } from 'https://unpkg.com/rough-notation?module';
      const $ = (t) => document.querySelector(t);
      const config = { type: 'highlight', color: 'lightblue', iterations: 3, multiline: true };
      const a1 = annotate($('#hl'), config );
      if (document.querySelector("#hl2") != null) {
        const a2 = annotate($('#hl2'), config );
        a2.show();
      }
      if (document.querySelector("#hl3") != null) {
        const a3 = annotate($('#hl3'), config );
        a3.show();
      }
      if (document.querySelector("#hl4") != null) {
        const a4 = annotate($('#hl4'), config );
        a4.show();
      }
      if (document.querySelector("#hl5") != null) {
        const a5 = annotate($('#hl5'), config );
        a5.show();
      }
      a1.show();

and then simply surrounding the highlighted paragraphs with
<span id="hl">This is interesting stuff!</span> But now comes a boring bit with no content worth noting. <span id="hl2">A great insight has arrived.</span>

It works with Firefox but once I tested Edge and Chrome, I noted that the animation never triggers but the "paint" becomes visible if I resize the window/canvas. Any suggestions on how to make this work across the different browsers?

[igufi]

I'm not sure what the problem is but wrapping the code proposal from issue #18 fixed my problem in Chrome and Edge.
So, never mind :-)