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.

Text Rendering Issues on Brave Browser

See original GitHub issue

Expected Behavior

Text rendering should be the same across all browsers

Current Behavior

pixi-text-rendering-browser-comparison

All texts are rendered at a little lower Y value;
On a multiline text, line height is much bigger than expected;
This behavior does not happen when using BitmapText; (at least when using https://pixijs.io/examples/#/text/bitmap-text.js)

Steps to Reproduce

Using the official Text Example

Environment

pixi.js version: 6.4.2 - WebGL 2
Brave - Version 1.40.113 Chromium: 103.0.5060.114 (Official Build) (64-bit)
Firefox - Version 102.0.1 (64-bit)
Chrome - Version 103.0.5060.114 (Official Build) (64-bit)
OS & Version: Windows 11
Running Example: https://pixijs.io/examples/#/text/text.js

Issue Analytics

State:
Created a year ago
Comments:8 (4 by maintainers)

Top GitHub Comments

1reaction

miltoncandelerocommented, Jul 12, 2022

Yeah, it’s a feature of brave. Brave randomizes the canvas text rendering to prevent fingerprinting

Learn more: https://en.wikipedia.org/wiki/Canvas_fingerprinting

Fingerpint test: https://browserleaks.com/canvas

edit: Really cool gif of the same canvas text rendering in 35 different computers canvas-fingerprinting 1

1reaction

bigtimebuddycommented, Jul 8, 2022

If I had to guess, this seems to be a bug in Brave about how it measures text (e.g. context.measureText). Much of this functionality is wrapped up in the PIXI.TextMetrics. One thing that would be helpful @diegomachado would be to output values from TextMetrics.measureText to see if there are any differences. That may help track down what’s going on.