Black screen error in iframes when running on low-end PCs and laptops

Hello PlayCanvas Community

I have downloaded the playcanvas build and configured a website that communicates through an iframe.

The problem is that on windows laptop and low end pc, playcanvas doesn’t load, just a black screen. If I resize the window, I can see the playcanvas scene looks fine.

I tried using the query selector to grab the iframe containing the playcanvas or the canvas area of the playcanvas and using the resizeCanvas function at the end of the loading script, but it didn’t work.

As far as I can tell, the playcanvas finishes loading when the website opens, but the iframe hasn’t loaded yet. So I think it’s a problem with the timing of the loading of the playcanvas and the calling of the iframe on the website, and I would appreciate it if anyone has a similar experience or can give me a solution.


Hi, I’m a Korean user and the current time is 1:00 AM. Therefore, I won’t be able to reply in time because it’s time for me to go to sleep. I apologize. I would really appreciate it if you could help me.

I would first try a new blank project. If the issue doesn’t happen, then I would try to disable everything in the project that fails to load and start enabling piece by piece to isolate the issue. You could also check dev console, to see if there are any possible errors.

Since the app loads fine, if the window is small, I suspect your low end computer doesn’t have resources to render a full screen canvas. Probably not enough video memory. Try a blank project and also try loading other WebGL apps, like Three.js or Babylon examples.

1 Like

Thank you. I am working with another developer to fix the issue. I have adjusted the iframe area to the aspect-ratio in the css and I’m assuming that’s where the problem is coming from. If I fix it, I’ll share it for other users. . thanks for your help

I solved this problem.
Please refer to this article