Line opacity not working on Fitbit Versa

[jamiesmith123]

Hi, I'm making a clockface for Fitbit Versa with SDK version 4.2 and running into an issue with setting opacity for a line.

I have two lines - one with opacity .3 and one with opacity 1. The opacity differences between these lines is visible in the emulator:

https://ibb.co/qFTry6x

But there is no opacity when I install the clockface on my device (Fitbit Versa):

https://ibb.co/Qk0b4Lx

Please help, how do I fix this?

Here's the code:

index.gui:

<line x1="250" y1="125" x2="275" y2="150" stroke-width="6" stroke-linecap="round" id="testPoint1" fill="#3A86FF"></line>
<line x1="275" y1="150" x2="300" y2="175" stroke-width="6" stroke-linecap="round" id="testPoint2" fill="#3A86FF"></line>

style.css:

#testPoint1 {
  opacity: 1;
}

#testPoint2 {
  opacity: .3;
}

[JonFitbit · Accepted solution]

Unfortunately this is a bug. it's fixed in the 4.2.1 firmware update which will be in the new year.

[jamiesmith123]

Thank you for the update Jon! Any idea if that firmware will be rolled out to Fitbit Versa? 

[JonFitbit]

Yes, 4.2.1 is for Ionic, Versa, Versa Lite, and Versa 2.

[jamiesmith123]

Great - thanks again!

[jamiesmith123]

Thrilled to see this fixed - thanks Fitbit team!

[RisoSystems]

Jon,

I noticed that stroke-opacity is not recognized, while fill-opacity is. Can we expect stroke-opacity to be implemented?

Thanks...