CODEWITHSUNDEEP
ioscsssvg
Deniss Kozlovs
Deniss Kozlovs

Reputation: 4841

SVG as background image crashes safari on ios

I use SVG sprites on a website. They render fine until zooming the page - nearly in 90% cases Safari crashes and goes to desktop. This happens on iPad 3 and iPhone 4. Does anyone have experienced the same issue? Can't find anything on Google and have no clue where to start.

Sprites are created like so:

i.sprite {
    background-image: url("sprites.svg");
    background-repeat:no-repeat;
    display:inline-block;
    height: 28px;
    width: 29px;
    vertical-align:middle;
    font-style:normal;
    font-size:0;
}

Upvotes: 2

Views: 1870

Answers (1)

Nicolas Hoizey
Nicolas Hoizey

Reputation: 2031

Not intended to discourage you completely, but there are a lot of issues with SVG on webkit, both in Chrome and Safari, desktop and mobile. Appart from incomplete implementations, some parts of SVG must be forgotten if you want full cross browser support. I've made webkit crash with simple foreignObject elements: http://webkit-crasher.esviji.com/

However, I use an SVG image sprite for the 3 icons in the top right corner of http://gasteroprod.com/ without any issue:

this is an SVG sprite

Upvotes: 1

Related Questions