Intermittent Global Text Offset

[Rob Morris]

Hey all!  I'm using Pixi.js in my edutainment platform, and it rocks.  We're about to go live, and in our testing have found an intermittent issue with how text in Pixi.Text elements is rendered.

Context: we're using a webfont loaded using Google's webfont.js like so:

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
  WebFont.load({
    custom: {
      families: ['Short Stack']
    }
  });
</script>

This produces a synchronous load, and is run before we bootstrap up Pixi and our framework/game.  This seems to be working fine; I include it purely for context.

The problem is that very seldomly, our Pixi.Text elements render with the text offset vertically by ~5 pixels.  When this happens, ALL our text is offset.  Doing a hard refresh (ctrl+shift+R on Firefox) resolves the issue, usually.  See the attached screenshots for what it looks like when it borks.

So!  Any ideas what could be causing this issue?  I know folks have had issues with load timing in the past, but the webfont is clearly loaded by the time the game renders - the font is correct in both versions.  There's zero code changes between the working and offset versions - just a hard refresh.  Help?

 

[themoonrat]

I wonder if text metrics are sometimes being generated before the font has actually finished loading, thus spacing is thrown off when it then generates text with the loaded font.

You often need to have used a custom font once in the dom before it'll then work everywhere else. I reckon 

isn't miles away from what your issue is. Different symptoms to the same underlying issue.

[Rob Morris]

Thanks, I'll give one of those other font loading libraries a try...

Frustrating heisenbugs are the best!

[mobileben]

One thing you should do if you are using WebFont is ensure before you proceed, the load is already done. You can use the active callback for this.

I use some fonts which are web based or are local to my game.

I do something like the following.

WebFont.load({
    google: {
        families: ['Pacifico']
    },
    active: function() {
        app.webFontsLoaded = true;
        if (app.coreAssetsLoaded) {
            app.nextState = GameState.Game;
        }
    }
});

 

There are two flags in use here since I have 2 async things loading: font and and "core assets". So both loading mechanisms check to see if the other one is done. If you don't have this need, you can remove it.