Bug: cacheAsTexture and RenderTexture.create() fail on any container with masks in Firefox, unless you timeout delay them for the mask to finish drawing.

Current Behavior

Summary: In Firefox, any container that has a mask inside it will disappear if you call cacheAsTexture() immediately after adding the mask. Its derived texture will also come out blank if you call RenderTexture.create() on it. The solution is to cache it as a texture, create an artificial delay, update the cache, and only then can you create a RenderTexture from it.

This was a crazy thing to get to the bottom of. It appears to only happen in Firefox (tested in Safari and Chrome, it's fine).

Detail: I'm assuming cacheAsTexture and RenderTexture.create both use similar draw/blit methods. One of those related to masking must be async and not being correctly waited for. The draw appears to finish before the Graphics for the masks are drawn, allowing a fully masked (i.e. blank) texture to be returned.

Workaround: In order to extract a RenderTexture of something with a mask in Firefox:

(1) call cacheAsTexture(true) on the container after putting a mask on it (2) delay for 60-100ms, then call updateCacheTexture() on it (3) now it can be used for a RenderTexture. (4) call cacheAsTexture(false) if you want to.

Other caveats, if you're trying to build a texture generator with masks:

• The alpha of the target container and the masked children have to be more than zero
• The target container has to be added to the display chain before you cache it
• If you don't go through the cacheAsTexture() step, or the delayed updateCacheTexture() step, this doesn't work at all
• The thing you cache and update has to be the thing with the mask, not its parent (tried it, it doesn't work)
• Mercifully, you can position it at x:-1000 and if you follow these steps, Pixi will still generate it (after you wait 100ms for the mask to be rendered, before trying to create a texture from it).

Examples: These examples should show two circles. The upper-left is the original, the lower-right is the RenderTexture created from it:

(1) Works in Chrome, fails in FF (but works in FF if you don't add the mask on line 19)

(2) Firefox workaround, adding delay. Crucially, notice that the instant you call cacheAsTexture(true) here, the container disappears in FF, whereas it does not disappear in Chrome. In FF, the first circle disappears from the first frame. In Chrome, the first circle is visible the whole time until the delayed RenderTexture shows up. This is because FF makes it disappear the instant you cache its texture. This is a clue that both methods of capturing textures are failing to wait for the mask to be completely drawn or calculated.

Expected Behavior

Should wait for the mask to finish in FF before becoming available to cache as a texture.

Steps to Reproduce

See upstairs.

Environment

• pixi.js version: 8.9.1
• Browser & Version: Firefox 137.0.2
• OS & Version: Mac 12.6

Possible Solution

No response

Additional Information

No response