I am facing an issue when my simple capacitor application switches state from inactive to active state PIXI-viewport not responding. It is specific to iOS only, I verified the same on Android(it working fine).
import * as PIXI from "pixi.js";
import { App } from "@capacitor/app";
import { Viewport } from "pixi-viewport";
export class ExampleComponent {
private app: PIXI.Application;
private viewport: Viewport;
constructor() {
window.addEventListener("load", this.initializePixi.bind(this));
window.addEventListener("resize", this.onResize.bind(this));
}
async initializePixi() {
this.app = new PIXI.Application();
await this.app.init({
width: 800,
height: 600,
backgroundColor: 0x1099bb,
});
//document.body.appendChild(this.app.canvas as HTMLCanvasElement);
document.body.appendChild(this.app.canvas);
// create viewport
this.viewport = new Viewport({
screenWidth: window.innerWidth,
screenHeight: window.innerHeight,
worldWidth: 1000,
worldHeight: 1000,
events: this.app.renderer.events, // the interaction module is important for wheel to work properly when renderer.view is placed or scaled
});
// add the viewport to the stage
this.app.stage.addChild(this.viewport);
// activate plugins
this.viewport.drag().pinch().wheel().decelerate();
const sprite = this.viewport.addChild(new PIXI.Sprite(PIXI.Texture.WHITE));
sprite.tint = 0xff0000;
sprite.width = sprite.height = 100;
sprite.position.set(100, 100);
this.appStateChangeListner();
}
onResize() {
// Handle window resize
console.log("resizeing");
if (this.app && this.viewport) {
console.log('resizeing-applied');
this.app.renderer.resize(window.innerWidth, window.innerHeight);
this.viewport.resize(window.innerWidth, window.innerHeight);
}
}
private isAppActive: boolean = false;
private appStateChangeListner(): void {
App.addListener("appStateChange", (state) => {
this.isAppActive = state.isActive;
if (state.isActive) {
//this.viewport.pause = false;
this.onResize();
//this.app.renderer.render(this.app.stage); // Force a render to update
}
});
}
}
It works fine for first-time iOS but if I switch apps to another and come back to my app viewport content does not respond anymore, I checked, and I'm receiving all touch/zoom callbacks from the viewport but the content within it not moving.
I checked on the Simulator, a physical device, in different iOS versions from 15.0-17.5.1, the same result.
I am facing an issue when my simple capacitor application switches state from inactive to active state PIXI-viewport not responding. It is specific to iOS only, I verified the same on Android(it working fine).
"pixi-viewport": "^5.0.3", "pixi.js": "^8.2.5"
my implementation
https://github.com/user-attachments/assets/df465ac8-dbca-47a7-8706-4c04cffa7c20
It works fine for first-time iOS but if I switch apps to another and come back to my app viewport content does not respond anymore, I checked, and I'm receiving all touch/zoom callbacks from the viewport but the content within it not moving.
I checked on the Simulator, a physical device, in different iOS versions from 15.0-17.5.1, the same result.
Repro project: ProjectLink