Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Transparent background is not working on Safari + FF #55

Closed
bebensiganteng opened this issue Apr 8, 2013 · 8 comments
Closed

Transparent background is not working on Safari + FF #55

bebensiganteng opened this issue Apr 8, 2013 · 8 comments
Labels
🕷 Bug Verified that it’s actually a legit bug that exists in the current release.

Comments

@bebensiganteng
Copy link

Hi,

I've tested it on

FF 19.0.2
Opera 6.0.3
OSX 10.8.3

Screen-Shot-2013-04-08-at-16 22 54

check the green text.

btw: great library!
@bebensiganteng
Copy link
Author

ow, its an easy fix

http://stackoverflow.com/questions/12273858/how-to-make-webgl-canvas-transparent

tried that, works fine now..

@bebensiganteng
Copy link
Author

hmm, but the alpha is now out in chrome

@GoodBoyDigital
Copy link
Member

so close! ya could try try removing the premultipliedAlpha from thw webGL creation context?

@romanenko
Copy link

I'm also having issues with transparent background with WebGL renderer. Background is transparent only in Opera, new Safari, Chrome and Firefox with WebGL leaves it green.

    <html>
    <head>
        <title>Playground</title>
        <style>
            body {
                margin: 0;
                padding: 0;
                background-color: #000000;
            }
            #circle {
                display: none;
            }
        </style>
    </head>
    <body>
        <canvas id="circle" width="300" height="300"></canvas>
        <script src="../pixi.js/bin/pixi.js"></script>
        <script>

            var canvas = document.getElementById('circle');
            if (canvas.getContext) {
                // Preparing canvas cirlce
                var context = canvas.getContext('2d');

                context.beginPath();
                context.fillStyle = "rgb(255,0,0)";
                context.arc(canvas.width/2,canvas.height/2,150,0,Math.PI*2,false);
                context.fill();
                context.closePath();

                // create an new instance of a pixi stage
                var stage = new PIXI.Stage(0x66FF99);
                var renderer = PIXI.autoDetectRenderer(500, 500, null, true);
                document.body.appendChild(renderer.view);

                var circleTexture = PIXI.Texture.fromCanvas(document.getElementById("circle"));
                var circle = new PIXI.Sprite(circleTexture);

                circle.position.x = 100;
                circle.position.y = 100;

                stage.addChild(circle);

                function animate() {  
                    renderer.render(stage);
                    requestAnimFrame( animate );
                }

                requestAnimFrame(animate);
            } else {
              alert("At least HTML5 Canvas support required");
            }

        </script>

        </body>
    </html>

@englercj
Copy link
Member

Looks like this is fixed in the dev branch by this commit: a479e27

@romanenko
Copy link

Looks like the bug still persists. I'm using the same code above and the latest pixi from master (1.2.0), but background of the stage isn't transparent in Safari and FF. In Chrome and Opera everything is fine.

@sfentress sfentress mentioned this issue Sep 30, 2013
Closed
@sfentress
Copy link

I can confirm that this bug still persists when using the WebGLRenderer. If you open http://jsfiddle.net/SamFent/yvh4k/ in FireFox, you will see that the background is opaque and covers the text behind the canvas.

edit fiddle - jsfiddle-1

The basic fix for this seems to be fairly simple: when we are requesting a transparent background, it seems we have to use gl.clearColor(0,0,0,0).

Making this simple change fixes the issue in FireFox:

edit fiddle - jsfiddle-2

However, this fix alone introduces a weird antialiasing issue in Chrome. In my example above with the nicely-rendered svg spheres with gradients, we suddenly get an ugly grey line around the spheres that seems to have been caused by the clipping of the edges:

edit fiddle - jsfiddle

The fix for this seems to be to set premultipliedAlpha to true (where it was before the fix above (a479e27) was applied). Setting premultipliedAlpha: true returns the svg images to being rendered without ugly clipping:

edit fiddle - jsfiddle-3

I have added a pull request for this fix here: #345

sfentress added a commit to concord-consortium/lab that referenced this issue Nov 21, 2013
@sfentress
*Submodule update*: Switch Pixi.js submodule to CC fork
4ea3d1f 
Update commit SHA to CC'S transparency-fix branch.

See Pixi.js issue pixijs/pixijs#55

[#57659114]
@lock
Copy link

lock bot commented Feb 27, 2019

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@lock lock bot locked and limited conversation to collaborators Feb 27, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
🕷 Bug Verified that it’s actually a legit bug that exists in the current release.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@sfentress @bebensiganteng @romanenko @englercj @GoodBoyDigital