SVG problem on some models on mobile website

[hommealone]

New here; this is a question about a mobile website, not an app; please let me know if I should be posting this on some other board instead!

I'm developing a website for use on mobile devices. I'm having problems with the display of an SVG file on (only) some iPad models.

A jpg image within an <image> tag in an SVG file is getting wrongly resized on some iPad models but not on others.

I have a webpage (link below) which includes a complex SVG file. This SVG contains a jpg image (raster) as an <image> tag (which serves as a background for the whole thing), along with many <circle> and <text> elements (vector). On some iPads the jpg image gets resized improperly, out of synch with the vector elements which display correctly. On problematic models, the background image does not line up with the dots (vector elements) because it is being resized larger by the device. On a computer it is displaying correctly.

See below note about which models have problems...

The whole thing is meant to be scaled up and down so people can zoom in and out, and the vector elements resize along with the background raster image. Only on some iPads (and iPhone 6!) are they not displaying correctly.

Models:

iPad 1 (and 2?): OK (confirm iPad 2 if you can!)
iPad Air 1: OK
iPad Air 2: Image problem

iPad Mini 1: Image problem
iPad Mini 2: OK
iPad Mini 3: Image problem

Compare how this works on a computer versus problematic versions of iPad:

http://bestofyourtown.com/test/

Any ideas on why that (background) image would be getting sized incorrectly on those particular models, but is OK on the others?

 

[Fid]

After reading this post a second time, I originally read it about a month ago, I have a question. On the iPads with the image problem do you know what the iOS version is? The problem could be with the iOS version. Have you tested on the iPad 3 or 4?
On my iPad 4, iOS 8.1.2, the test site looks fine until I switch to Around Town. Around Town shows a zoomed in back ground scene with misplaced dots when compared to my Mac's Safari. I am viewing the site in landscape view, iPad turned sideways.

Edit: Are you using the canvas tag? If so, are you specifying dimensions,width and height, in the canvas tag?

 

[twerppoet]

I agree with Fid. This sounds more like an iOS version problem than a model problem. Especially when you notice that all the newest models are having the issue, and all of them, by default, are on some version of iOS 8.

The exception is the iPad Mini 1, which can be upgraded to iOS 8.

If this turns out to be true, especially if these devices are all on the newest version, iOS 8.1.2, about all you can do is submit feedback to Apple. If you are a developer go through that channel. Otherwise you'll have to use the user feedback form.

http://www.apple.com/feedback/ipad.html

There's unlikely to be any direct response, or a quick turn around; so you may have to find a workaround on your end.