Currently, I am working on a mobile application using Cordova Phonegap that incorporates stacked gradients. The app functions perfectly on Android devices, but when tested on iOS, the gradients display differently. Instead of the intended blue color, the edges appear green. Additionally, there seems to be an unusual transition effect at the bottom of the screen.
https://i.sstatic.net/YH78O.jpg
Below is a snippet of my CSS code:
#gradient2Layer1 {
position: fixed;
height: 100px;
bottom: 0;
left: 0;
height: 20%;
width: 100%;
color = "blue";
background: -webkit-linear-gradient(270deg, rgba(15,431,28,0) 35%, #b3c6ff 50%,rgb(128,128,128) 100%);
z-index: 100; }
#gradient2Layer2 {
position: fixed;
height: 100px;
bottom: 0;
left: 0;
height: 20%;
width: 100%;
opacity: 0.5;
color = "blue";
background: -webkit-linear-gradient(270deg, rgba(15,431,28,0) 35%, blue 50%, blue 100%);
animation: fadeIn 5s infinite alternate;
z-index: 100; }
I'm currently seeking advice on how to resolve this issue. Any suggestions?