Endless loop for resize

Questions
1

G’day.

I am facing the problem of an infinite loop for my BabylonJS canvas. I have a flex-layout containing the canvas and another component. The canvas has flex-grow 1 and the other component has a fixed size. I install a ResizeObserver on the canvas and call engine.resize() when it is triggered. The canvas seems to be getting bigger with every cycle of the infinite loop.:woozy_face:

Before, I had the canvas in another component with width: 100% and height: 100%, which worked without a problem. ChatGPT told me the ResizeObserver should be installed on the parent but I don’t get why and it also didn’t help.

I managed to put a stop to the infinite loop by doing this:

new ResizeObserver(() => {
	if (canvas.clientWidth != engine.getRenderWidth(false) || canvas.clientHeight != engine.getRenderHeight(false)) {
		engine.resize();
	}
}).observe(canvas);

But still, calling engine.resize() seems to somehow mess up layout rules. With this, approach the canvas grows way bigger than it should and pushes the other component out of sight.

Can you guys help? :slight_smile:

2

I fixed it now by putting the canvas into a div and sizing it absolutely. I think the error comes from that engine.resize() sets width and height manually causing a retrigger of layouting logic which considers the new size properties again etc etc.

Although I thought my flex-layout properties were set up properly (e.g. flex-basis: 0). So I still haven’t really understood why it didn’t work before.

1 Like
3

Usually such things are CSS related.