DPC

Pixi Canvas is coming white on mac safari

Recommended Posts

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

 

Share this post


Link to post
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 });

 

Share this post


Link to post
Share on other sites

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)

 

Share this post


Link to post
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

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.

Share this post


Link to post
Share on other sites

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.

Guest
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.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.