Changed text not displayed

[SunsetRunner]

Hi ppl,

I have a <svg> element in combination with a <mask> element. The <mask> element contains a <text> element which displays the current time.

My problem is, if I change the text property of the <text> element, the new value is not displayed. It gets only updated with touching the screen.

There is no problem without the <mask> element.

Is this behavior by design or a bug? How I can work around it? I want a text with linear color gradient.

<svg class="background">
  <text id="dateLabel" />
  <mask id="timeMask">
    <text id="timeLabel" />
  </mask>
  <svg mask="#timeMask" width="100%" height="100%">
    <gradientRect width="100%" height="100%"
      gradient-type="linear"
      gradient-x1="0" gradient-y1="15"
      gradient-x2="0" gradient-y2="100%-15"
      gradient-color1="white"
      gradient-color2="gray"/>
  </svg>
</svg>

let timeLabel = document.getElementById("timeLabel");

function updateClock(today) {  
  let hours = today.getHours();
  let mins = util.zeroPad(today.getMinutes());
  timeLabel.text = `${hours}:${mins}`;
}

updateClock(new Date());
clock.ontick = function(evt) {
  updateClock(evt.date);
}; 

Thanks

[JonFitbit · Accepted solution]

It's currently a known issue. I feel your pain, this is affecting my clock face too.

https://dev.fitbit.com/release-notes/2017-11-08-1.1-beta3/#known-issues

Hopefully will be fixed in a future update.