渐变在 iOS 移动 safari 上给出了错误的颜色

Question

我正在使用 Cordova Phonegap 开发一个移动应用程序，该应用程序使用相互堆叠的渐变。在 Android 上一切正常，但在 iOS 上渐变显示不同。边缘是绿色的，而当我在浏览器中预览它时，它应该是蓝色的。页面底部还有这个奇怪的过渡。

这是我的 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;  }

我该如何解决这个问题？

Answer 1

我真的认为这是一个打字错误，您想使用 rgba(15,43,128,0)（这是您要查找的蓝色阴影）而不是 rgba(15,431,28,0)，后者甚至不是有效的 RGB值（限制为 0..255）。

渐变在 iOS 移动 safari 上给出了错误的颜色

Gradients give the wrong color on iOS mobile safari

css

gradient

ios

cordova