[SOLVED] Transparent project not working

Help & Support
1

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

https://playcanvas.com/project/870606/settings

2

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.

http://scottmcdonnell.github.io/pixi-examples/index.html?s=demos&f=transparent-background.js&title=Transparent%20Background

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:

image
image1608×2068 78.7 KB

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

image
image2040×172 40.2 KB

3

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?

4

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:

image
image2322×1642 127 KB

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

5

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

Code:

(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/
Code:

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

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: