背景图像不显示在iPhone上

Question

如何在iPhone上显示背景图像显示在Android上？

HTML

<div class="bgimg-1">    
    <div class="hometoptext ">
        <h1 class="text-center">
            Africa's First Online Business Lender
        </h1>
        <div>
            <h3 class="thin">Grow faster with South Africa's most innovative online funder</h3>
        </div>
        <div class="text-center">
            <button class="btn btn-primary" (click)="applyNow()">APPLY NOW</button>
        </div>
    </div>
    <div class="bottom-arrow text-center">

    </div>
</div>

背景图片无法在iPhone上显示

CSS

.bgimg-1 {
    background-image: url("img/main_pic2.png");
    color: white;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-color: #999;
    position:relative;
    width:100%;
    min-height: 100vh;
    top: 0;
}

Android上的图片：

iPhone上的图片：

Answer 1

• iOS Safari具有background-size: cover; +的错误行为 background-attachment: fixed;
• Safari（OS X和iOS）和Chrome不支持背景大小：100％ PX;结合SVG图像，它将它们留在了 原始大小，而其他浏览器正确拉伸矢量图像 同时将高度保持在指定的像素数。
• iOS Safari在background-size: cover;上有错误的行为 页面的主体。
• macOS Safari 10出现background-size的帧速率问题。
• Android 4.3浏览器及以下报告不支持百分比 在background-size

参考：Link

Answer 2

此问题的可能解决方案仍然是纯CSS回退

CSS Tricks有三个很好的方法，后两个是CSS3封面不起作用的后退。

<强> HTML

<img src="img/main_pic2.png" id="bg" alt="">

<强> CSS

#bg {
  position: fixed; 
  top: 0; 
  left: 0; 

  /* Preserve aspect ratio */
  min-width: 100%;
  min-height: 100%;
}