Background Image not Displaying Correctly in iOS

Question

I am using a tile-able background image on a website. The site views great in all desktop browsers but when I view the site on my iPad Mini (running iOS 6.1.3) the background image has streaks in it. You can see a pattern on most pages that is a line (the size of the background image) that looks fine, then another line again the same size of the background image, etc.

Here is a screenshot showing the issues:

Here is the CSS required for the background:

#wrap {  
   margin:0 auto; 
   position:relative; 
   padding:0; 
   background: #B3B1B2 url(/images/bgs/parchment2.jpg); 
}

I tried clearing the cache of the iPad but that did not work. I am at a loss as why this is happening. How do I prevent and solve this issue?

Update

I created a jsFiddle of the wrapper. It looked okay on the website. So I am left to assume it is somewhere in my code. However, this doesn't always happen immediately on the site. It may happen with the Fiddle but I have not seen it happen. If it is my site how do I track the code that is causing the issue?

Update 2

I changed the background image to the html, bodytags and the issue still happens but isn't as bad and will clear it self. I am still left wondering how I prevent the issue all together.

Update 3

I tried @Riskbreaker's idea of switching to PNG. This did not work. I still see the lines. It also increased the background file substantially (from 30k to almost 200k). I also tried a completely different background image thinking it may be the image itself but I still saw the error. I switched back to jpg for file size considerations.

How do I solve this issue? Is it an iOS issue or something in my code?

The site in question is http://www.lfrieling.com/. I only see this on my iPad Mini running iOS 6.1.3 (latest as of this writing). I do not see this on my iPhone running same version of iOS. Also you see this on long pages more than other pages. See Professional > Resources.

Answer 1

Have you tried hardware acceleration? Add -webkit-transform: translateZ(0); to the same css as your adding the background. This is my guess because it appears to be a rendering issue and hardware acceleration fixes rendering issues when you use css transitions in Chrome.

#wrap {  
   margin:0 auto; 
   position:relative; 
   padding:0; 
   background: #B3B1B2 url(/images/bgs/parchment2.jpg);
   -webkit-transform: translateZ(0); 
}

Or maybe try retina display images for devices that support them using media queries?

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
  #wrap {  
   background: #B3B1B2 url(/images/bgs/parchment2_2x.jpg);
  }
}

Media Query source *

To solve the rendering issues you can try adding -webkit-transform: translateZ(0); to other tags that are also wrapping content on the page. This may prevent loading/rendering issues.