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

[wanlijun]

Preflight Checklist

• [X] 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?

[Vadman97]

@eoghanmurray you're referring to the following code, right? I might have another example where we're running into this with text being written along with an image on a canvas, with the text being occluded by the image.

https://github.com/rrweb-io/rrweb/blob/5fbb904edb653f3da17e6775ee438d81ef0bba83/packages/rrweb/src/replay/index.ts#L1092-L1094