Problem with raster image scaling in SVG on some iPad/iPhone models

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 and, on iPhone, only on the latest iPhone 6.
  
 A jpg image within an <image> tag in an SVG file is getting wrongly resized on some iPad models but not on others. (See list below.)
  
 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 should 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: Raster image problem
  
 iPad Mini 1: Raster image problem
 iPad Mini 2: OK
 iPad Mini 3: Raster image problem
  
 Please compare how this works on a computer versus problematic versions of iPad: 
 http://bestofyourtown.com/test/ 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?
 

 I'm hoping that I can correct the problem by (perhaps?) making changes to the attributes on my <SVG>  or <image> tags, perhaps the viewbox or preserveAspectRatio attributes? I know little about this, so any help would be appreciated.

  
 And of course, if you have any suggestions on how to SOLVE the problem... :-)
  
 Thanks!