背景圖像不顯示在 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 不支持 background-size: 100% px； 結合 SVG 圖像，它將它們保留為原始大小，而其他瀏覽器正確地拉伸矢量圖像，同時將高度保留為指定的像素數。
• iOS Safari 在background-size: cover;上有錯誤行為。 在頁面的正文上。
• macOS Safari 10 的background-size存在幀速率問題。
• 據報道 Android 4.3 及以下瀏覽器不支持background-size百分比

參考：鏈接

Answer 2

這個問題的一個可能的解決方案仍然是純 CSS Fallback

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

Answer 3

iOS 設備不支持背景圖像。 證明鏈接： https ://caniuse.com/?search=background-url