Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

v6.2.2 letterSpacing is broken with chrome 99.0.48

See original GitHub issue

Expected Behavior

letterSpacing works in chrome

Current Behavior

letterSpacing has no effect at all

Possible Solution

Steps to Reproduce

See here: https://www.pixiplayground.com/#/edit/19vqJzdGI3_aKknD2P1d1

Environment

pixi.js version: 6.2.2
Browser & Version: Chrome 99.048
OS & Version: MacOS 12.2.1
Running Example: https://www.pixiplayground.com/#/edit/19vqJzdGI3_aKknD2P1d1

Issue Analytics

State:
Created 2 years ago
Comments:7 (5 by maintainers)

Top GitHub Comments

2reactions

Keyangcommented, Mar 3, 2022

Change drawLetterSpacing function in @pixi/text module From:

            if (supportLetterSpacing) {
                this.context.letterSpacing = letterSpacing;
                this.context.textLetterSpacing = letterSpacing;
            }

            if (supportLetterSpacing) {
                this.context.letterSpacing = letterSpacing+"px";
                this.context.textLetterSpacing = letterSpacing+"px";
            }

seems fix the issue.

0reactions

madclemcommented, Mar 15, 2022

Looking at this link in the comments in the drawLetterSpacing method, it seems like the trial for Canvas2D API ended the 22nd of February 2022.

Setting the supportLetterSpacing to false (and let the manual way handles it) fixes it in our project. Should we just bin this condition in drawLetterSpacing and use:

if (letterSpacing === 0) {
    if (isStroke) {
      this.context.strokeText(text, x, y);
    } else {
      this.context.fillText(text, x, y);
    }
    
    return;
  }

instead?