未出現在iPad上的SVG背景圖像

我在網站上出現了一個非常奇怪的問題。我使用多個背景圖片;有4張照片，然後是一個有角度的形狀的SVG，超過圖像並對其進行構圖。這是用於身體背景的CSS未出現在iPad上的SVG背景圖像

body { 
    background-color: #bbe2de; 
    background-image: url('/img/mobile-bg-exorcised.svg'); 
    background-position: top center; 
    background-repeat: no-repeat; 

    color: #2a2a2a; 

    font-family: "ff-din-web"; 
    font-size: 16px; 
    line-height: 1.4em; 
} 
@media screen and (min-width: 600px) { 
    body { 
     background: 
      url('/img/desktop-bg.svg') top left, 
      url('/img/bg-photo-4.jpg') 849px 4460px, 
      url('/img/bg-photo-3.jpg') 0 3948px, 
      url('/img/bg-photo-2.jpg') 617px 980px, 
      url('/img/bg-photo-1.jpg') 0 186px; 
     background-repeat: no-repeat; 
    } 
}

它可以在所有桌面瀏覽器上正常顯示，但在iPad上SVG根本不會顯示出來。其餘的圖像顯示很好。我在網站的其他地方使用SVG作爲背景圖片，並且它們顯示正常，所以我不認爲它是像MIME類型那樣的服務器問題。

下面是該網站的鏈接，住： http://johnkatimaris.thesmackpack.com/

下面是有問題的SVG文件中的情況下，你覺得可能是有什麼事情不對具體爲：http://d.pr/f/2vp4

任何想法，爲什麼它的不工作？

來源

2013-09-24 Ryan Giglio

這很奇怪。該圖片在iPad上自行加載，[其SVG有效]（http://validator.w3.org/check?uri=http%3A%2F%2Fjohnkatimaris.thesmackpack.com%2Fimg%2Fdesktop-bg。 svg＆charset =％28detect + automatic％29＆doctype = Inline＆group = 0）並正確設置了MIME。嘗試用一些文本創建一個頁面，只有那個背景並從那裏開始。或者將您的iPad插入Safari並使用[其網絡檢查器]（http://webdesign.tutsplus.com/tutorials/workflow-tutorials/quick-tip-using-web-inspector-to-debug-mobile-safari/） –

我遇到了另一個不同的站點上有不同的SVG文件再次遇到這個問題，並有同樣的問題。它似乎就像iPad會顯示SVG的高度有某種無證的限制。這並沒有什麼意義，我真的不認爲它確實是這種情況，但這是我能想到的唯一的事情，因爲縮短圖像會在兩種情況下立即修復它。

來源

2013-11-25 15:51:10

正如您所說，將高度設置爲5400px將使我的svg不再顯示。似乎在背景位置修復後具有背景大小。 http://stackoverflow.com/questions/18999660/background-image-not-showing-on-ipad-and-iphone – Amalgovinus

未出現在iPad上的SVG背景圖像

回答

相關問題