setHTML causing animation lag

Phaser 3
1

I’m using createFromHTML. Below is an example:

var myHTML = '<div>Hello World</div>';
var myHTMLAdded = this.add.dom(100, 250).createFromHTML(myHTML).setScrollFactor(0);

After something is completed I’m “updating” the HTML with setHTML:

myHTMLAdded.setHTML('<div>Phaser 3</div>');

The moment setHTML is run other animations that are currently running lag for a split second. If I comment out setHTML the lag goes away.

2

I looked at the source code from the API docs and tried the following below and the lag seems to have gone away:

myHTMLAdded.node.innerHTML = '<div>Phaser 3</div>';
3

Are you sure you weren’t calling setHTML() repeatedly?

4

It might be since it’s inside sprite.on('animationupdate', listener).

I tried adding the following inside and it lags even longer:

animation.on(Phaser.Animations.Events.ANIMATION_COMPLETE, function (anim, frame, sprite, frameKey) {
					
	myHTMLAdded.setHTML('<div>Phaser 3</div>');
        htmlResults.visible = true;

}, this);

htmlResults is other unrelated html that works - if I comment out setHTML.