SVG background image not appearing on iPad

Question

I'm having a very strange problem with the background on a site. I'm using multiple background images; there's 4 photos and then an SVG of angled shapes that goes overtop of the images and frames them. This is the CSS for the body background

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

It displays properly on all desktop browsers, but on iPad the SVG just doesn't show up at all. The rest of the images show fine. I'm using SVGs as background images elsewhere on the site and they display fine, so I don't think it's a server issue like MIME type.

Here's a link to the site, live: http://johnkatimaris.thesmackpack.com/

And here's the SVG file in question in case you think there might be something wrong with it specifically: http://d.pr/f/2vp4

Any ideas as to why it's not working?

That's weird. The image loads fine on its own on the iPad, [its SVG is valid](http://validator.w3.org/check?uri=http%3A%2F%2Fjohnkatimaris.thesmackpack.com%2Fimg%2Fdesktop-bg.svg&charset=%28detect+automatically%29&doctype=Inline&group=0) and the MIME is set correctly. Try creating a page with just some text and only that background and work up from there. Alternatively plug your iPad to Safari and use [its web inspector](http://webdesign.tutsplus.com/tutorials/workflow-tutorials/quick-tip-using-web-inspector-to-debug-mobile-safari/) — fregante, Nov 15 '13 at 15:08

score 1 · Accepted Answer · answered Nov 25 '13 at 15:51

1

I've run into this problem again on a different site with a different SVG file and had the same issue. It SEEMS like there's some kind of undocumented limit to how tall the iPad will display an SVG. That doesn't really make sense and I really don't think it's actually the case but it's the only thing I can think of, since making the image shorter fixes it immediately in both cases.

answered Nov 25 '13 at 15:51

Ryan Giglio

1,085
1
14
26

Putting the height around 5400px would make my svg no longer display, as you said. Seems like having background-size after background-position fixes it. http://stackoverflow.com/questions/18999660/background-image-not-showing-on-ipad-and-iphone – Alkanshel Jan 20 '14 at 23:24

SVG background image not appearing on iPad

1 Answers1