Pixi.js text moves up and down when scale and resolution is used

Question

I am rendering text using Pixi.js. The text I am rendering is inside a container with a scale, so I have to reduce the font size to account for the scale.

const app = new PIXI.Application({ background: '#1099bb' });

document.body.appendChild(app.view);

const fontSize = 40;
const scale = 4

const text = new PIXI.Text(
    'Scaled',
    new PIXI.TextStyle({ fontSize: fontSize / scale })
);

const container = new PIXI.Container();
container.scale.set(scale);
container.addChild(text);
app.stage.addChild(container);

Because of the scale, the text gets blury since Pixi renders it with a smaller font size and then upscales it. This can be fixed with one line of code, setting a resolution to match the scale:

text.resolution = scale;

Now the text looks sharp. However, there is still a problem. When I animate the font size, I notice that the text jumps around slightly in the vertical direction, as can be seen in this fiddle. There appears to be some kind of rounding issue going on.

How can I get rid of this "jumpiness", and have the text be correctly positioned?