HTML on top of PIXI

[Sebi]

Hey Guys,

I'm working on a game and I have encountered an really strange issue.

For an ingame chat, I figured that using a HTML div container to render the chat messages, would be faster than using PIXI Text-Objects.

http://mokgames.com/screenshots/1.png

http://mokgames.com/screenshots/2.png

http://mokgames.com/screenshots/3.png

http://mokgames.com/screenshots/4.png

As you can see, the more span tags there are, the bigger the framedrop. (1 span per message)

However, Chrome doesn't have that issue.

So, I'm wondering, is this an IE only issue? It probably has to do with recomposing the screen. And maybe a scrollable div container is just too heavy.

The scrollbar on the last screenshot is entirely written in pixi and so are the input fields.

So the only thing causing an issue must be the span tags that populate my div container.

Now I am debating on using PIXI Text Objects for the chat.. or maybe detecting if the player is using IE.

If that issue also exists in other browsers, then I might have to go full canvas, just in case.

I do have quite a lot assets that I did not yet publish on my Github, but which I might publish when I feel like it is good enough to do so. So, if anyone can help me with that ridiculous framedrop, then it will help me alot.

Did anyone else encounter an issue when displaying HTML on top of a PIXI Stage?

regards

[JDW]

Hello,

It is not IE only, but it appears that with your code, only IE needs to redraw your static UI every frame when on top of a canvas element. If one of your UI element were to be animated (forcing repaint every frame), you would see the same framerate drop in other browsers.

Maybe that some of your code is the cause of continuous repaints or redraws in IE.