[Bug]: The player shows canvas in the wrong way

[wanlijun]

Preflight Checklist

• I have searched the issue tracker for a bug report that matches the one I want to file, without success.

What package is this bug report for?

rrweb-player

Version

1.0.0-alpha.4

Expected Behavior

The correct one should be like this:

Actual Behavior

But I got this one sometime:

Are there any asynchronous problems? It works well sometime. Actually the events data is same in the both cases

Steps to Reproduce

the code in recorder:

rrweb.record({
      recordCanvas: true,
      emit(event, isCheckout) {
        if (isCheckout) {
          uuid = (new Date()).getTime()
        }
        events.push({uuid, data: event})
      },
      checkoutEveryNms: 3 * 60 * 1000, // checkout every 3 minutes
    })

the code in player:

replayer = new RrwebPlayer({
            target: containerDom,
            props: {
              events,
              UNSAFE_replayCanvas: true
            }
          });
          replayer.play();

the events data which I got from recorder
data.json

Testcase Gist URL

No response

Additional Information

I found something. These continuous commands are split into many events. If I put these commands in one event , It works well all the time. I hope this can help you.

[eoghanmurray]

Great work;
So it looks like the chain of canvas/webgl commands is splitting across something that should be atomic?

@Juice10 the command argument application is async and promise awaits all commands in an event.
Is it possible that commands from a subsequent event need to await execution of the prior event?