Nativescript: [Bug] The linear gradient is not correctly applied in Android

[tsonevn]

The below-attached CSS snippet with linear gradient will not be applied correctly for Android.
XML:

 <StackLayout>
        <Label text="Linear gradient" class="h1 text-center"/>
        <StackLayout  class="test" ></StackLayout>
    </StackLayout>

CSS:

.test {   
    width:24;  
    height: 200;  
    background: linear-gradient(to top, white 50%, green);
}

Android result:

Expected result:

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[btaluy]

% doesn't seem to be working at all, not even for IOS.

[tsonevn]

Hi @btaluy,
I tested the code in a sample project it seems to work as expected. For your convenience, I am attaching sample project and screenshot.

Archive.zip

[btaluy]

50% is already what it is at default, try 10%. @tsonevn

[tsonevn]

HI @btaluy,
I tested the gradient with 10%, however, the color still seems to be applied correctly. I checked the project on iOS 11.4.
I am attaching an image with the results from the NativeScript and web demos.

Let me know if I am missing something.

[vakrilov]

It seems that percents are not handled correctly at all. It might be an issue with parsing.

[btaluy]

Any news on this matter?

[Johanneke]

I just discovered that when adding the percentage, you have to add it to all colors. So instead of
background: linear-gradient(to top, white 50%, green);
you should do:
background: linear-gradient(to top, white 50%, green 0%);
This will create a solid white for the first 50%, then the gradient is applied, and in this case there is no part of solid green, so the gradient proceeds until the end of the element. If you want a larger portion of green, you should up that percentage. In CSS the 0% is optional, but Nativescript requires it.

I tested this with NS 5.3.2, on iOS 12, Android 24 and Android 28.

[virtualbjorn]

@Johanneke it works! Thanks