CODEWITHSUNDEEP
iphonecsssvgmobile-safaribackground-position
john holt ripley
john holt ripley

Reputation: 818

iPhone ignores background-position with svg

I'm using an svg background image on a simple anchor element and need the graphic positioned to the right of the element.

It works in most browsers, except on iPhone (fine on iPad).

I've set up two codepens - identical apart from using a gif or an svg image. The gif is correctly positioned to the right, but the svg isn't.

gif - positioned correctly on iPhone - http://codepen.io/johnholtripley/pen/yLDwF

svg - incorrectly positioned on iPhone - http://codepen.io/johnholtripley/pen/maCkb

I can't see any other reports of this issue - is this a known issue?

Upvotes: 2

Views: 1066

Answers (2)

john holt ripley
john holt ripley

Reputation: 818

Just seen the footnote on caniuse.com's entry for svg - "Partial support in iOS Safari and older Safari versions refers to failing to support tiling or the background-position property." - http://caniuse.com/svg-css

Any workarounds available though?

Upvotes: 1

zuc0001
zuc0001

Reputation: 930

You haven't stated what "type" if iPhone you are using. If you are using one of the older iPhone's, some content may not appear to be correct because the browser is not up to date (as the updates for that device have stopped). When I was developing a website a while back, I looked it up on my iPod Touch 2 and the content appeared distorted; whereas when I looked up the same content on my newer device (5th gen), the content appeared correctly.

Upvotes: 0

Related Questions