FormattedString inside Button has wrong background color after animation

Did you verify this is a real problem by searching Stack Overflow and the other open issues in this repo?

Yes, I did not found any.

Tell us about the problem

When using Button with FormattedString inside it and the background color of the Button is changed via animation, the background color of the FormattedString is not changed.

Which platform(s) does your issue occur on?

Android

Please provide the following version numbers that your issue occurs with:

• CLI: 3.2.1
• Cross-platform modules: 3.1.1
• Runtime(s): 3.2.0
• Plugin(s):

"dependencies": {
    "@angular/animations": "~4.2.0",
    "@angular/common": "~4.2.0",
    "@angular/compiler": "~4.2.0",
    "@angular/core": "~4.2.0",
    "@angular/forms": "~4.2.0",
    "@angular/http": "~4.2.0",
    "@angular/platform-browser": "~4.2.0",
    "@angular/router": "~4.2.0",
    "nativescript-angular": "~4.2.0",
    "nativescript-theme-core": "~1.0.2",
    "reflect-metadata": "~0.1.8",
    "rxjs": "~5.4.2",
    "tns-core-modules": "~3.1.0",
    "zone.js": "~0.8.2"
  }

This problem was not occuring with the cross-platform modules 3.0.0 and android runtime 3.1.1.

Please tell us how to recreate the issue in as much detail as possible.

Reproduced behavior in playground: https://play.nativescript.org/?id=8cArU2Fb8w0jPjDWXtvV0

1. Create new {N} application: tns create MyApp --ng
2. Add Button with FormattedString in it
3. Animate the background color of the button
4. The background color of the FormattedString is not changed

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

view:

<Button>
  <FormattedString>
    <Span text="button text"></Span>
  </FormattedString>
</Button>

css:

Button {
    background-color: green;
    animation-name: button-highligh;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes button-highligh {
    from { background-color: green; }
    to { background-color: blue; }
}

<bountysource-plugin>

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource. </bountysource-plugin>

[doumr]

@RadouaneRoufid Actually, I have found a workaround with the tns-core-modules@3.4.0 and tns-android@3.4.1. When you set the background-color property of the FormattedString to transparent (like so <FormattedString style="background-color: transparent;">) then it works as expected. You can see the workaround in action here: https://play.nativescript.org/?template=play-ng&id=DypmBB&v=3

Therefore I guess this issue can be closed as there is a workaround for this. Do you agree @tsonevn ?

[tsonevn]

Hi @doumr, I am glad to hear that you have found a workaround. However, I think that we should keep the issue open until it is fixed. Also, it would help the other user to find the suggested temporary solution.