[Pixi 6.3.0] DisplacementFilter stops updating when browser goes full screen

There is a sprite bound to a DisplacementFilter. The sprite moves a little on each frame to move the displacement. This works fine, also when scaling the browser window, but stops working when the browser goes into fullscreen mode (F11 on Ms Edge) and once in full screen the normal update-behaviour for the filter never gets working again until reloading the webpage. The filter is still applied in full screen, but it’s not updating to the moving sprite anymore.

Not sure why this isn’t working. In earlier versions I worked with filters and never saw this issue.

There is nothing to see in the console.log.

I tried the following without succes:

• Setting the filterArea on the filter like so (and update it on a window resize event). This doesn’t make a difference;

this.displFlt.filterArea = this.rend.screen;

• Setting both the sprite as the filter to the stage instead of on the pixi-viewport as a test; it still stops working when going fullscreen.

• Searching on the issue here on github. I found this commit that looks like it’s created to fix some fullscreen issue on filters, but it’s not clear to me if this needs a different workflow for us and/or what that workflow should be / if there’s something we need to do in order to support full screen.

https://github.com/pixijs/pixijs/pull/4682

• After seeing some info here: https://github.com/pixijs/pixijs/wiki/v4-Creating-Filters I also tried setting autofit of the filter to true and false, but that didn’t change anything either.

• Next to Chromium browsers, also tested in Firefox latest (99.0). Same issue

Conclusion: I have no clue why suddenly what works in non-fullscreen mode stops working in fullscreen mode. So far it feels like an issue.

Expected Behavior

DisplacementFilter to keep updating to moving texture (= displacement map) when switching browser to fullscreen.

Current Behavior

DisplacementFilter stops updating to moving texture (= displacement map) when switching browser to fullscreen.

Possible Solution

No clue

Steps to Reproduce

// ...

initFilter() {
  this.displSpr = Sprite.from(texture);
  this.displSpr.texture.baseTexture.wrapMode = WRAP_MODES.REPEAT;
  this.vp.addChild(this.displSpr); // pixi-viewport
  
  this.displFlt = new filters.DisplacementFilter(this.displSpr, 1);
  this.vp.filters = [this.displFlt];
}


// using pixi ticker to trigger onTick();
onTick(e) {
   this.displSpr.x += e;
   this.displSpr.y += e;

   this.rend.render(this.stage);
}

Environment

• pixi.js version: 6.3.0
• Browser & Version: Ms Edge (Chromium) 100.0.1185.36 (also tested in Firefox latest (99.0) on Windows. same issue)
• OS & Version: Windows 10

[bigtimebuddy]

First thanks for reporting, it is valuable when people report all issues they find.

A reproduction is super useful because my goal when people submit issues is to try to first triage if its because a user-error because they’re doing something undefined, anti-pattern or just flat wrong–which happens a lot. I can’t tell you how many times I’ve done exactly what you’re suggesting, only to find that I can’t reproduce, then a user provides some other valuable info. It takes time even with a snippet like you provided.

Also, reproductions are valuable for validating if a fix works or if something regressed a year from now. We just rerun it! Not everything in Pixi can be easily run with a unit test, especially DOM behaviors like this issue.

The moral of the story is that make a repro or don’t. BUT we are going to prioritize looking at issues that have clear reproductions and where the submitter did their homework to isolate and repro the issue on their own (try other computers, other versions of Pixi, other hardware). So it will probably take longer to look at issues with less info or context where I need to reverse-engineer what’s happening.

[bigtimebuddy]

No worries, glad you found a resolution on your own. Good luck with your project.