Element component mask not working on Firefox mobile

Help & Support
1

Hi all,
Element component masks (circular/custom shape masks applied to UI elements via the Element component’s mask feature) do not render correctly on Firefox for Android. The mask texture loads successfully but the masking effect is not applied, the element renders as a plain rectangle instead of the masked shape.

Reproduction project: https://playcanvas.com/editor/project/1584168

To reproduce

  1. Open the reproduction project on Firefox for Android

  2. Look at the hotspot elements, they should appear as circular masked images

  3. They instead appear as unmasked squares

Expected behaviour
Circular masked image, as visible on desktop and Chrome for Android.

Screenshot_20260817-174009
Screenshot_20260817-1740091008×2244 69.9 KB

Actual behaviour
Square unmasked element. The mask texture is present but has no effect.

Screenshot_20260817-173944
Screenshot_20260817-1739441008×2244 70.5 KB

Platform

  • :cross_mark: Firefox for Android (broken)

  • :white_check_mark: Chrome for Android (working)

  • :white_check_mark: Desktop browsers (working)

2

Could you also test the engine example?
I tried that on Firefox on Google Pixel 10 Pro and that seems to work great.

https://playcanvas.com/examples/#/user-interface/masking

3

Hi, the engine example seems to work fine.
I’m on a Google Pixel 9 Pro XL.

Screenshot_20260818-122403
Screenshot_20260818-1224031008×2244 182 KB

4

Also, the mask from the engine example uses an image as mask.
My example uses a material as mask. Perhaps that’s why one is working and the other is not.

Does my example work for you on your Pixel 10 Pro?

5

Works for me, I see a circle.
Pixel 8 Pro (not 10, sorry)

6

This works correctly on the Samsung S25 using the Samsung browser, however it does not work on the Samsung S25 using the Firefox browser.

7

Thanks for testing, any clue on why it does not work on firefox with the new engine?

8

@mvaligursky

9

Perhaps try the other option then.

10

I mean, yes I can do that.
Just letting you know about the bug.

Hopefully this will get fixed in future releases though.

11

If you wish, you can create a GitHub issue. That way, the team is aware of it and can look into it in due course.

12

Considering this is Firefox only issue, we’d need to create a bug on their system, it’s likely not an engine issue.

1 Like
13

The fact that my old build (previous engine) does work on firefox makes me think it is an engine bug. But I will add the GitHub issue.

Thanks

———–

2 Likes