Jump to content

Pixi Canvas is coming white on mac safari


Recommended Posts


    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');

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


    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;



Link to comment
Share on other sites

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 });


Link to comment
Share on other sites

@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

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.

Link to comment
Share on other sites

  • 7 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...