Progressive performance degradation in ScrollablePanel with mask, enableLayer and forceSetTimeout enabled

[notKitory]

Bug Description

A progressive performance degradation (smooth framerate drop) occurs when using ScrollablePanel with specific rendering and FPS configurations. The rendering cost appears to increase with every frame over time.

This issue is specific to Phaser 4 (tested on 4.1.0 + phaser4-rex-plugins 4.0.5/4.0.7).
Note: Under the exact same conditions, this setup works without any performance issues in Phaser 3.90.0.

Steps to Reproduce

The issue is triggered by combining the following base parameters:

1. Set the game FPS configuration with a high target and forceSetTimeOut enabled:

   fps: {
       target: 240,
       forceSetTimeOut: true
   }

2. Create a ScrollablePanel with both mask and enableLayer enabled:

   panel: {
       child: content,
       mask: { updateMode: 0 }, // or true
       enableLayer: true
   }

3. Run the application and wait for a few moments or scroll the panel.
4. Observe the frame rate gradually decreasing and the rendering time increasing.

Additional Context

• The performance drop happens smoothly, which suggests a potential WebGL resource leak, un-cleared stencil/mask buffers, or layer stacking overhead in Phaser 4.
• This issue likely affects any mask application on Rex-objects in Phaser 4.

Tested Environments

• Phaser version: 4.1.0 (Works fine in 3.90.0)
• phaser4-rex-plugins version: 4.0.5 (via jsdelivr) & 4.0.7
• Devices & Browsers:
  • MacBook Air M4 (Chrome, Safari)
  • iPhone 15 (iOS Safari)
  • Redmi Note 14

Expected Behavior

The performance should remain stable over time, matching the behavior observed in Phaser 3.

Live Demonstration

You can reproduce the bug using this pre-configured CodePen:

• https://codepen.io/bubkexez-the-encoder/pen/YPpdEKL (The parameters mentioned above are already applied here)

[rexrainbow]

There has a mask-related issue in phaser4. It might be the root cause.
I will try to use scaleFactor to reduce the size of mask.

[rexrainbow]

The scaleFactor is added to repo and minify file. But the performance still not good enough, imo.
Might wait for new mask of official feature.

[rexrainbow]

I add panel.mask.maskType parameter to scrollablePanel's constructor config.
Set this parameter to 'stencil' to enable stencil mask feature.
Please see this demo, line 63, with phaser4.2.0

This feature will enable layer mode and apply stencil mask. source code

[notKitory]

Thank you for the suggestion.

It looks like stencil mask did not solve my issue. I suspect the problem may be somewhere in my own code, but I still have not been able to find it.

I made another demo that is much closer to the real problematic scene in my game, with pages and scrollable:
https://codepen.io/bubkexez-the-encoder/pen/pvRwGWZ

Here is a video demonstrating the issue:
https://imgur.com/a/Xkb1dyp

I also tried to adapt the code from your demo into my project, but unfortunately I could not get it working there either.

The expected behavior is that the scene remains stable with forceSetTimeOut: true and targetFps: 240, instead of causing the browser to hang or become unresponsive.

Thanks again for your help :)

UPD: Your demo works fine, but I can't see the difference between your demo and my project.

[rexrainbow]

Might try this GridTable ui element, which create/reuse game objects of visible cells only, so that it can reduce amount of game objects in table.

[notKitory]

Lags are present even if the scrollable exists without elements (and with a small number of them).
In Phaser 3, FPS is consistently kept at the maximum level that the device can handle (conditionally 200/240 FPS). The same behavior is expected on Phaser 4.
In Phaser 4, FPS doesn't just drop, but the game and browser freezes.

It looks like the render queue, when there is a mask on the screen, gets clogged faster than the device has time to process when using forceSetTimeout. This is confirmed by the fact that the behavior is stable when using requestAnimationFrame.

I want to be able to manage my FPS independently of requestAnimationFrame.

[rexrainbow]

Point A : The performance dropping even when the panel is empty, but the stencil feature can't help
Point B : My scrollablePanel test case works fine

If only point A, I think the render pipeline of phaser4 might have some issues.
But point A + point B together... it is hard to find the root cause of this performance issue, in your system.
Might try and error, to find out witch element has performance issue.

[rexrainbow]

New method stepLimitFPS in phaser4.2.0, might manage the fps in game