SVG DOM not fully loaded on alphatab.postRendered

[gburlet]

Your Environment

• Version used: dev branch
• Platform used: JavaScript
• Rendering engine used: SVG
• Browser Name and Version: Chrome 79.0.3945.79
• Operating System and version (desktop or mobile): desktop mac os Mojave

Expected Results

Entire SVG loaded in .alphaTabSurface when alphatab.postRendered callback triggered

Observed Results

at.on("alphaTab.postRendered", function() {
    // jQuery selectors accessing SVG render of digital score fail to access entire score
    // Only grabs SVG elements for a subset of the systems (lines) because not all have loaded yet
});

currently, I'm have this workaround, although I hate timing-based solutions like this because they invoke race conditions and are fragile:

at.on("alphaTab.postRendered", function() {
    $('.alphaTabSurface').css("height", "100%");
        setTimeout(function() {
            // jQuery selectors here: e.g.,
            $("#alphaTab > .alphaTabSurface > svg.alphaTabSurfaceSvg > g[class^='b']")
        }, 50);
});

Basically waiting 50ms for the SVG to fully load. This probably has to do with web workers being enabled and loading the score asynchronously? In any case, I think the trigger alphaTab.postRendered should be called when all the systems are loaded and rendered in the DOM.

Steps to Reproduce (for bugs)

Print jQuery selector results to console in the postRendered callback

[Danielku15]

This sounds to me like the "lazy loading" feature. AlphaTab has a feature that it does not instantly put the rendered SVG into the DOM. As you might know: alphaTab renders the notation in multiple chunks.

Putting all chunks directly to the DOM, has caused quite some performance impact. That's why I added a "lazy loading" feature. AlphaTab initially only keeps an empty div-placeholder with the corresponding size. While scrolling the viewport alphaTab will detect that items are visible and converts the SVG string to a DOM element:

You can disable lazy loading but this will have a performance impact for large music sheets.

I could offer to add an additional event which is signaled when alphaTab converts a lazy container to the actual dom.

[Danielku15]

I made a very slight extension which ensures that at least the elements in the viewport are converted to DOM elements before the events are signaled. Hope this helps already a bit.

[gburlet]

I also thought it may have been a lazy loading issue. I had lazy: false in my alphaTab parameters setting when experiencing the bug. I'll checkout your latest commit and see how that works. Thanks!

[Danielku15]

If you still encounter the issue it would be great if you can setup a fiddle or small example for me to check out what issue you're facing.

I could only imagine that on very small songs the event could overtake the embedding to the dom. I could imagine some piece of code causing it but I'd need to check in detail if I can remove the decoupling at this place or would need to invent some better synchronization system.

[gburlet]

Sure I can do that! First let me see the effect of your changes in commit 9dd42f9 and if the issue still persists I'll create a minimal example in a fiddle for you.

[Danielku15]

I also just merged #316 which demoves the decoupling of appending render results to the DOM which I mentioned. I did various tests as it was causing also #299. Now it should be guaranteed by the single threaded nature of JavaScript that the DOM elements are available when the event is signaled (in case no lazy loading is enabled).

[Danielku15]

ping @gburlet Were you able to test the latest changes? Do you still face this issue?