<mask> Does not work for images on actual devices

[HmmWhy]

I am attempting to set an image as the "texture" for text.

This works fine in the simulator for all 3 devices, but does not work when the app is installed to my fitbit versa, the fill color of the text is displayed.

<mask id="mask">
  <text id="TimeText" font-size="100" font-family="Colfax-Black" text-anchor="middle" text-length="32" x="50%" y="20%+60" fill="white" />
</mask>
<svg mask="#mask" width="100%" height="100%">
  <image href="images/myimage.png" load="sync"/>
</svg>

Frustratingly, if I replace the image with a gradient, It works on the device (as well as the simulator) and the text being masked has a gradient "texture".

  <mask id="mask">
  <text id="TimeText" font-size="100" font-family="Colfax-Black" text-anchor="middle" text-length="32" x="50%" y="20%+60" fill="white" />
  </mask>
  <svg mask="#mask" width="100%" height="100%">
   <gradientRect x="0" y="0" width="348" height="250"
    gradient-type="bilinear"
    gradient-x1="30" gradient-y1="30"
    gradient-x2="100%-60" gradient-y2="100%-60"
    gradient-color1="cyan"
    gradient-color2="white"
    gradient-color3="magenta"
    gradient-color4="green" />
  </svg>

[Gondwana · Accepted solution]

<mask> is pretty flaky on the hardware.

However, in case the mask image on your watch is larger than the screen size (348x250), reduce it to the display size before putting it in your project. The hardware doesn't like scaling large images either.

[HmmWhy]

Resizing the actual image did seem to work. From a hardware perspective I suppose I can understand why, but from a web developer's perspective that is quite non-intuitive.

The help is much appreciated, regardless.

It would be nice if the simulator more accurately represented the hardware it is simulating, but I suppose that is understandable.

Thanks!