css - Gradients give the wrong color on iOS mobile safari -


i'm developing mobile app cordova phonegap uses gradients stack on top of eachother. on android works supposed on ios gradients shows different. edges green whereas when preview in browser blue it's supposed be. there's weird transition @ bottom of page.

enter image description here

this css:

#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;  } 

how can fix this?

i believe typo , wanted use rgba(15,43,128,0) (which shade of blue you're looking for) instead of rgba(15,431,28,0), not valid rgb value (limited 0..255).


Comments

Popular posts from this blog

Ansible - ERROR! the field 'hosts' is required but was not set -

customize file_field button ruby on rails -

SoapUI on windows 10 - high DPI/4K scaling issue -