与背景属性中的图片网址结合使用时，CSS线性渐变在iOS上不起作用

Question

我正在使用线性渐变和图像url的组合作为页面上的背景。这一切在台式机和移动设备（仅适用于Android）上均可正常运行，但在iOS设备（iPhone和iPad，在iOS 12上经过测试）上无法正常运行，并且仅显示渐变色之一。 这是我正在使用的CSS：

.green-background-image {
    background:-webkit-linear-gradient(to bottom, rgba(0, 139, 243, 0.9),rgba(72, 177, 0, 0.6)), url(background-min.jpg);
    background:linear-gradient(to bottom, rgba(0, 139, 243, 0.9), rgba(72, 177, 0, 0.6)), url(background-min.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-color:#498ca7;
    background-repeat: no-repeat;
    background-position: center center;
}

我为webkit添加了浏览器前缀，但这没有任何区别。

以下是这两种情况的屏幕截图（有效和无效）

Answer 1

原来是background-attachment属性的问题。在为移动屏幕尺寸添加background-attachment: scroll;之后，问题就解决了。

编辑

我在某个地方找到了更好的解决方案（很抱歉，找不到链接）：

@media only screen and (max-width: 786px){

    .green-background-image {
        background-image: none;
        background-repeat: no-repeat;
        background-attachment: inherit;
        background-position: inherit;
        background-size: inherit;
        background-position-y: auto;
    }

    .green-background-image{
        content:"";
        background-color: RGB(6, 134, 238);
        position:fixed;
        top:0;
        height:100vh;
        left:0;
        right:0;
        z-index:-1;
        background: linear-gradient(180deg,rgb(0, 139, 243),rgba(72,177,0,0.63)),url(background-min.jpg);
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

}