PlayCanvas in iframe of hidden Element (Bootstrap Modal)

Help & Support
1

I got a problem with my PlayCanvas application which is loaded in an iframe. This iFrame is placed in a Bootstrap Modal. The Modal is hidden by default.
The problem is, that when I open the Modal, the area, where the PlayCanvas application should be, is empty. I analysed the problem and it seems like the canvas in the iframe it is loosing its width and set it to 0.

<canvas id="application-canvas" tabindex="0" width="0" height="825" class="fill-mode-KEEP_ASPECT" style=""></canvas>

Futher I have to say, that this worked a year ago, and now I’ve made an update of my application. The old one is still woking and the new one is working, when I display the Modal on startup.

Any hints for a simple solution to fix this? My solution whould be to set the width manually by JavaScript. But why did the width get lost in first place?

2

I found a solution by setting the resolution in the project settings form auto to fixed.
But then of course, the resultion is fixed and looks ugly, when I expand the window to fullscreen mode (for the application I set the default resolution to 790 x 550).
Other solutions are welcome.

3

You could create the app when the modal first unhides?

I’m a bit surprised that the at the canvas doesn’t resize but I guess that’s because the window itself isn’t resized. Looking at the examples here: https://github.com/playcanvas/engine/blob/fab9d05a711d0a075e719dd603e57278c212dfaa/examples/webvr/index.html#L144

Looks like the way to go is to hook up an event to resize the canvas when something changes size or call resizeCanvas manually on the unhide.