iOS: Viewport not responding when app comes from background to foreground state

[pratik-softgames]

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

Screen.Recording.2024-07-29.at.4.15.24.PM.mov

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.

Repro project: ProjectLink

[YVeselovskyi]

I have the same issue :(

[pratik-softgames]

I resolved this issue by invoking the pause method when my application became active again:

this.viewport.container.input.pause();