2

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?

1
  • looks fine for me, Iphone5 Mar 6, 2013 at 10:34

2 Answers 2

1

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?

0

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.

5
  • Hmm - I'm seeing this issue with iPhone 4.2.1 and 5.1.1, so it's interesting that you're seeing the arrow icon to the right on your 5 Mar 6, 2013 at 11:12
  • Yep my old iPod touch 2 is on 4.2.1. Compared to today's technology, that version is old. If you can't get your hands on a newer iPhone, get an iphone simulator online to check how the website displays.
    – zuc0001
    Mar 6, 2013 at 11:25
  • Just tried ur code bits, and it does appear fine on my 5. Obviously a browser (old) issue.
    – zuc0001
    Mar 6, 2013 at 11:27
  • Thanks - I'll try a few more iPhones and see what I get - it's obviously not the blanket issue I thought. Mar 6, 2013 at 11:33
  • Yeah - it's fine on a 6.1.2 Mar 6, 2013 at 11:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.