PixiJS text jittering reproduction

#7551 reports that PixiJS' Text jitters when letters are added This one is using the fixed build

by ShukantPal

HTML

<script src="https://pixijs.download/fix/text-resize-resolution-not-1/pixi.min.js"></script>
<canvas id="view" />

CSS

@media (prefers-color-scheme: dark) {
  :root {
    background-color: #1f2227;
  }
}

#view {
  left: 0;
  position: absolute;
  top: 0;
}

JavaScript

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
const backgroundColor = isDarkMode ? 0x1f2227 : 0xffffff;
const foregroundColor = isDarkMode ? 0xffffff : 0x1f2227;

const renderer = new PIXI.Renderer({
	antialias: true,
  autoDensity: true,
  backgroundColor,
  resolution: 2,
});

document.body.appendChild(renderer.view);

const text = new PIXI.Text("j", {
	fill: foregroundColor,
  fontSize: 12,
});

text.scale.set(10);
text.resolution = 10;

renderer.render(text);

setInterval(
	() => {
  	if (text.text.length >= 14) {
    	text.text = "j";
    } else {
      text.text += "j";
    }
  },
  300,
)

PIXI.Ticker.shared.add(() => renderer.render(text));