Css IOS/Safari背景图片上的Bootstrap 4响应式网站

我目前正在使用Bootstrap4创建一个网站，页面已经完成，但不幸的是，在IOS/Safari下，背景图像显示不正确。仅显示图像的左上角，这也是原始大小。 我已经尝试了一些解决方案，但没有任何帮助

目前代码如下所示：

#landingpage {
    display: -webkit-flex;
    display: flex;
    align-items: center;
    height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .1)), url('../files/bg/bg_header.png')no-repeat center fixed;
    -webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    -o-background-size: 100%; 
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center center;
    text-align: center;
    }

为什么图像不能仅在Apple设备上正确显示？Windows、Linux和Android都可以正常工作