Pixi Canvas is coming white on mac safari

[DPC]

Hi,

    I am trying to display only the text content which is there in pixi example port. Everything is working fine in all the browsers except safari. Earlier it was working fine but from past 2 days it is showing only the white screen. All the assets and sounds are loading in background and I am able to play the sound and all but there is no visibility. Is there any specific reason for this or am I missing something ?. I have added the example script also. Any help will be appreciated. 

Thanks in advance.

var app = new PIXI.Application(800, 600, {backgroundColor: 0x1099bb});
    var element = document.getElementById('gameCanvas');
    element.appendChild(app.view);

    var basicText = new PIXI.Text('Basic text in pixi');
    basicText.x = 30;
    basicText.y = 90;

    app.stage.addChild(basicText);

    var style = new PIXI.TextStyle({
        fontFamily: 'Arial',
        fontSize: 36,
        fontStyle: 'italic',
        fontWeight: 'bold',
        fill: ['#ffffff', '#00ff99'], // gradient
        stroke: '#4a1850',
        strokeThickness: 5,
        dropShadow: true,
        dropShadowColor: '#000000',
        dropShadowBlur: 4,
        dropShadowAngle: Math.PI / 6,
        dropShadowDistance: 6,
        wordWrap: true,
        wordWrapWidth: 440
    });

    var richText = new PIXI.Text('Rich text with a lot of options and across multiple lines', style);
    richText.x = 30;
    richText.y = 180;

    app.stage.addChild(richText);

 

[ivan.popelyshev]

Lets try some settings: remove the transparency.

var app = new PIXI.Application(800, 600, {backgroundColor: 0x1099bb, transparent: false});

One more try, esotheric:

var app = new PIXI.Application(800, 600, {backgroundColor: 0x1099bb, transparent: 'notMultiplied'});

even more esoteric, that one is bad for performance:

var app = new PIXI.Application(800, 600, {backgroundColor: 0x1099bb, preserveDrawingBuffer: true });

 

[DPC]

@ivan.popelyshev Thanks for the solution.

var app = new PIXI.Application(800, 600, {backgroundColor: 0x1099bb, transparent: 'notMultiplied'});

The above code is working fine. But there is no background color. Is there any solution to display bg color also ?

[ivan.popelyshev]

You sure "false" is not working?

Ok, i see the problem, lets hack it. https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/webgl/WebGLRenderer.js#L100

app.renderer._backgroundColorRgba[3] = 1.0;

 

[ivan.popelyshev]

I need exact system and safari version, to post this in our github issues list.

[ivan.popelyshev]

Oh , right, I found the issue: https://github.com/pixijs/pixi.js/issues/4660 Need your safari and system version anyway, because that bug was filed for iOS

[DPC]

Thank you so much.

app.renderer._backgroundColorRgba[3] = 1.0;

This works great.

And here are the mac and safari versions.

Mac : 10.12.6

Safari : 11.0.2 (12604.4.7.1.6)

 

[omarojo]

@ivan.popelyshev Im having the exact same issue. In my case... it doesnt show up in Safari (11.0.3 - Desktop). But if I try it in my friend's Mac with same Safari version, it shows up perfect.

Firefox 58.0.1 (shows fine)
Chrome 63.0.3239.132 (shows fine)
Opera 50.0.2762.67 (shows fine)

I dont know why in MY safari doesnt work .. but in my friend's it does.

You can try it, Here is the website: http://generatelivevoting.herokuapp.com/redbullqualifier2_half/scores

BTW.. 
this worked: 

var app = new PIXI.Application(800, 600, {backgroundColor: 0x1099bb, transparent: 'notMultiplied'});

this didnt work:

app.renderer._backgroundColorRgba[3] = 1.0;

But still.. that doesnt explain why my Safari doesnt show up anything.. but in another computer with same Safari version.. it works fine.

[ivan.popelyshev]

First world problems. I dont even own a mac or iphone

[julio.guedes]

Same problem. Body was set to position:fixed. Changed it position:absolute. Works fine now. Safari 11.1.2 (11605.3.8.1)