[SOLVED] Transparent project not working

Hey Guys,

I’ve been trying to test the transparent project settings. I’ve made the project public.
The project just loads a iframe of itself after it loads. It stops doing it recursively because I’ve set a condition if (window.parent != window.top) to not load the project, so the project loaded in the iframe does not recursively create a new iframe within it.

Anyway, the problem I have, is that the project loaded on the iframe does not show a trasparent background, why is that? I’ve looked that the forum post regarding this and have tried everything that was suggested. Feel free to enter the editor and see for yourself


It’s a bit difficult to tell what’s going on but it looks like the canvas in the iframe is not set to be transparent.

Not sure what Pixi.js does (which is what appears to be loaded in the iframe?) but when the WebGL context is initialised on the canvas, it needs the alpha option to be true.


I don’t know enough about Pixi.js to give you an answer but it does look like the issue around the canvas of the iframe as you can resize the canvas and see the PlayCanvas app through the iframe:

Edit: FYI, the pixi.js app is not in the iframe after all. Not sure if that was intended or not:

The pixi app is not in the iframe, yes, I just used the PC published version (with ‘e’) of this project as a temporary placeholder until I get an SSL for my domain since I keep getting COORS error.

Thanks for sending me the link, when I get the SSL for the pixijs app that I create I will use it to test if it can be overlayed onto the PC project. But for now, can you tell me why the temporary placeholder (Transparent background) to be loaded in the ifram is not transparent?

Looks like a HTML/CSS issue.

The body in the iframe and/or iframe element needs to be set up correctly for transparency to work.

After loading in a test project, I hide the canvas but the document in the iframe is still opaque:

So something needs to be set on the CSS styling for it to be transparent. I don’t know what exactly though

Ah, the issue was that both the body and the HTML document in the iframe needed transparent backgrounds.

Parent project: https://playcanvas.com/project/871093/overview


(function () {
    var ifrm = document.createElement('iframe');

    ifrm.setAttribute('id', 'ifrm'); // assign an id
    ifrm.setAttribute('allowtransparency', 'true'); // assign an id

    // assign url
    ifrm.setAttribute('src', 'https://playcanv.as/e/p/Cu0Wr5XI/');
    //ifrm.setAttribute('src', 'about:blank');

    ifrm.style.zIndex = 1000;
    ifrm.style.position = 'absolute';
    ifrm.style.top = '100px';
    ifrm.style.left = '100px';
    ifrm.style.width = '300px';
    ifrm.style.height = '300px';
    ifrm.style.backgroundColor = 'transparent';
    ifrm.style.background = 'none allowtransparency';

    document.body.appendChild(ifrm); // to place at end of document

iframe project: https://playcanvas.com/project/871094/overview/

(function () {
    window.document.body.style.background = 'none transparent';
    window.document.documentElement.style.background = 'none transparent';
1 Like

Thank you soo much yaustar
I wouldn’t have been able to solve this problem, sad to say.
Your help is much appreciated :slight_smile: