Issues with Linear-Gradient functionality in NativeScript 8 on Android devices

I recently added a linear-gradient to an image in my NativeScript 8 app. Surprisingly, it seems to work perfectly on iOS, but I'm encountering some issues on Android. Despite trying solutions like using -webkit-linear-gradient(), the desired effect is still not achieved.

Here is how I implemented it:

HTML

<GridLayout rows="auto, auto, auto, auto, auto">
    <image class="backgroundImage" src="~/assets/images/registration.png"></image>
    ...
    ...
    ...
</GridLayout>

CSS

.backgroundImage {
    background: -webkit-linear-gradient(bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 85%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 85%);
    width: 100%;
}

iOS Emulator Screenshot (expected result)

https://i.sstatic.net/lXSY7.png

Android Emulator Screenshot (gradient issue)

https://i.sstatic.net/vpJEV.png

My question is: What could be causing this difference in behavior between iOS and Android with my current implementation?

androidcssangularnativescript

Answer №1

To create a similar effect on both platforms, you can apply a gradient layer over the image or any other component.

Example Code

<GridLayout rows="auto, auto, auto, auto, auto">
    <Image row="0" src="~/assets/images/registration.png"/>
    <ContentView row="0" height="100%" class="my-gradient"/>
    ... Other Components
</GridLayout>

Styling

.my-gradient {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1))
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Vanishing Act: Bootstrap menu vanishes after a click

Having difficulties with the menu on my website wrapster.sebastianbialek.pl. Whenever I resize the browser to mobile version and click on the collapse button, the menu shows up briefly and then disappears. Any assistance in resolving this issue would be gr ...

jquerycsstwitter-bootstrap

CSRF validation did not pass. The request has been cancelled. The failure occurred due to either a missing or incorrect CSRF token

Upon hitting the submit button in the login form, I encountered the following error message: Forbidden (403) CSRF verification failed. Request aborted. CSRF token missing or incorrect. settings.py MIDDLEWARE = [ 'django.middleware.security.Secur ...

javascripthtmlcsspython-3.xdjango-rest-framework

How can the file system module (fs) be utilized in Angular 7?

Hello, I am currently working with Angular 7. I recently attempted to utilize the fs module in Typescript to open a directory. However, I encountered an error message stating: "Module not found: Error: Can't resolve fs". Despite having types@node and ...

angulartypescriptfsangular7

Insert HTML elements into nested CSS classes

My goal is to utilize jQuery for looping through classes and adding text to an HTML element. I am currently working with the following example HTML: <div class="question"> <div class="title"> <strong>Here's the question ...

javascriptjqueryhtmlcss

Fine-tuning the design of the Box Model layout

I can't seem to get the table in my code to center properly and not be stuck against the left border. Despite trying various solutions, the table in column 2 is floating off to the left and touching the border. I need it to be more centered within the ...

htmlcsslayout

Is my website broken due to Internet Explorer?

The progress on my current website project has been smooth so far, but I'm encountering an issue when testing it in Internet Explorer. Whenever I try to view it in IE, the layout breaks completely. You can check it out at . I've attempted using C ...

htmlcssinternet-explorercross-browsergoogle-chrome-frame

synchronize the exchange of information and events between two components

Just joined this platform and diving into Angular 7 coding, but already facing an issue. I've set up two components along with a service. The data is fetched by the service upon clicking a button in the searchbar component, and I aim to display it i ...

angulartypescriptangular7

horizontal menu consolidation

Web Design <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Online Hangout</title> <meta http-equiv="Content-Type" content="text ...

htmlcss

Reloading the current route in Angular 4 using routerLink

Is it possible to refresh the current page by clicking on a link using routerLink? An example of the menu structure I have is: <ul> <li><a routerLink="home">Home</a></li> <li><a routerLink="users">Users</a& ...

angular

What is the best way to ensure that the CSS padding for a button matches the width of the column consistently?

I have encountered an issue where I am unable to maintain consistent padding for a button relative to the column width. This is crucial for me because the button's background changes when a user hovers over it. However, using a fixed value for the but ...

htmlcsswebpadding

Implement Php gettext functionality in Typescript

I have a keen interest in AngularJs 2, and I am planning to incorporate it into my upcoming project. I would like to integrate i18n with Php gettext. In a previous project, I utilized Php gettext by embedding Php within Javascript code as shown below: // ...

phpangulartypescriptgettext

getting requestParam of type date from angular using spring

Hello everyone, I am new to working with Angular and Spring. I am attempting to send a GET request with some date parameters, but I keep encountering an error. Here is the HTML code snippet: <div class="form-row"> <div c ...

javaangularspringspring-bootspring-mvc

Is there a way to horizontally center a content container in Flutter similar to a "max-width" container in CSS?

How can I create a centered content box like this in Flutter?: .content-box { margin-left: auto; margin-right: auto; width: 100%; max-width: 600px; background-color: blue; height: 100vh; } <div class="content-box"> Cont ...

htmlcssflutter

The TypeScript error message states, "The property 'breadcrumb' is not found within the type 'Data'."

My Breadcrumb Component is functioning properly when compiled to JavaScript and displaying the desired output. However, my IDE is showing an error message that I am struggling to fix. The error states: [ts] Property 'breadcrumb' does not exist o ...

angulartypescript

Is there a way to set the initial value of an input's ngmodel variable using only HTML?

Is there a way to assign an initial value of "1" to the variable named "some" using ngModel during initialization? *Update: I am specifically interested in how to achieve this using HTML only component.html : <input type="text" value="1" name="some" ...

angulartypescript

Looking to display a div with both a plus and minus icon? Having trouble getting a div to show with left margin? Need assistance hiding or showing div text

Can someone please review this source code? Here is the demo link: http://jsfiddle.net/bala2024/nvR2S/40/ $('.expand').click(function(){ $(this).stop().animate({ width:'73%', height:'130px' }); $( ...

javascriptjqueryhtmlcss

Incorporate Angular Material into a personalized library

In my quest to create a reusable library for various projects, I decided to embark on building my own from scratch. The process began with the formation of a new application solely dedicated to housing this library: ng new lib-collection cd lib-collection ...

angularangular-materialangular-library

What causes certain elements to update selectively in Ionic view, and why does this phenomenon occur only on specific devices?

My Ionic3 web application includes an HTML page structured like this: <h1> {{question}} </h1> <ion-list formControlName="content" radio-group [(ngModel)]="value"> <li *ngFor="let answer of question.answers"> <i ...

angularionic-framework

What could be causing my grid-area properties to not take effect?

I'm attempting to create a basic structure with a header in the top row, menu and content in the middle row, and footer at the bottom. Here is what I have so far: body { color: white; } .container { background: cyan; display: grid; ...

csscss-grid

Guide on retrieving inline style that has been overridden by CSS using JavaScript

<div style="background: url(http://www.example.com/image.jpg) center center/cover;"> This specific background image defined inline is being replaced by a rule in an external stylesheet: div { background-image: none !important; } Here's my q ...

javascriptjqueryhtmlcss