Runtime bug with UI masked elements

UI masked elements don’t work if they’re enabled during runtime. This can happen if enabling an entity some time after the app has initted. It also happens when creating masked elements via a template.

I’ve created a side-by-side example forked from the Loading Circle UI example project. We should see the animated radial progress bar on all 3, however it’s only working for the entity that is enabled when the app starts.

The barebones project is available here: PlayCanvas Editor - Loading Circle Bug

Does anyone know of any workarounds?

Edit: I found that it works if you disable them during runtime and then enable them at a later time. My current workaround is to:

  1. Spawn all masked UI elements off-screen (y screen position -2,000)
  2. Store them in a container for later retrieval
  3. Disable them all after the app initializes
  4. Retrieve and enable when needed

it could be related to this issue: Nested masked UI elements does not updated correctly when mask is disabled and re-enabled · Issue #4856 · playcanvas/engine · GitHub

1 Like