It does not work properly when the stage is scaled

[F1restix]

Hello,

I'm scaling the pixi stage following this approach.

The code looks like:

function onResize(newWidth = window.innerWidth, newHeight = window.innerHeight, scale = 1, stageX, stageY) {
    // Resizing the viewport
    this.viewport.resize(newWidth, newHeight);
    
    // Resizing the game renderer
    this.renderer.resize(newWidth, newHeight);
    
    // Scalign the stage to fit the window
    this.stage.scale.set(scale);
    
    // Centering the stage
    this.stage.x = stageX;
    this.stage.y = stageY;
}

The scaling is fine. The game fits on window on different resolutions but... The pixi-viewport does not working as expected.

1. There are no interactions. I have a button inside pixi-viewport and the pointertap event on the button dosn't work.
2. The plugins of pixi-viewport like drag, pinch and etc. are not working.

This is how I initialize pixi-viewport:

this.viewport = new Viewport({
    screenWidth: this.view.offsetWidth,
    screenHeight: this.view.offsetHeight,
    worldWidth: this._config.view.worldWidth, // 2750
    worldHeight: this._config.view.worldHeight, // 2510
    interaction: this.renderer.plugins.interaction
});

this.stage.addChild(this.viewport as any);

If I scale pixi viewport instead of pixi stage everything is working well. I mean If I change the resize method to this:

// Resize the viewport
this.viewport.resize(width, height);

// Resizing the game renderer/stage
this.renderer.resize(width, height);

// Scalign the stage to fit the window
this.viewport.scale.set(scale);

// Centering the stage
this.viewport.x = stageX;
this.viewport.y = stageY;

but I want to scale only pixi stage and I want to use pixi-viewport inside the scaled stage. Is there any way to do this?

[davidfig]

There may be a problem with scaling the stage and then placing viewport inside of it. I haven't tested that scenario.

With that said, I don't think improper scaling would stop the plugins from all working.