背景图像在iOS中无法正确显示

Question

我正在网站上使用可拼图的背景图片.该网站在所有桌面浏览器中都可以很好地查看,但当我在iPad Mini(运行iOS 6.1.3)上查看该网站时,背景图像中有条纹.你可以看到大多数页面上的图案是一条线(背景图像的大小)看起来很好,然后另一条线又与背景图像的大小相同,等等.

以下是显示问题的屏幕截图:

这是后台所需的CSS:

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

我尝试清除iPad的缓存但是没有用.我不知道为什么会发生这种情况.如何预防和解决此问题？

更新

我创建了一个包装器的jsFiddle.它在网站上看起来没问题.所以我只能假设它在我的代码中的某个地方.但是,这并不总是立即发生在网站上.这可能发生在小提琴,但我还没有看到它发生.如果是我的网站,如何跟踪导致问题的代码？

更新2

我将背景图像更改为html, body标签,但问题仍然存在,但并没有那么糟糕,并且会自行清除.我仍然想知道如何一起防止这个问题.

更新3

我尝试了@ Riskbreaker关于切换到PNG的想法.这没用.我仍然看到线条.它还大幅增加了背景文件(从30k增加到近200k).我也尝试了一个完全不同的背景图像,认为它可能是图像本身,但我仍然看到了错误.我考虑到文件大小,切换回jpg.

我该如何解决这个问题？这是iOS问题还是代码中的问题？

该网站是http://www.lfrieling.com/.我只在运行iOS 6.1.3的iPad Mini上看到这一点(截至本文撰写时的最新版本).我在iPhone上运行相同版本的iOS时没有看到这个.你也可以在长页面上看到比其他页面更多的内容.请参阅专业>资源.

Answer 1

您尝试过硬件加速吗？添加-webkit-transform: translateZ(0);到与添加背景相同的 css。这是我的猜测，因为这似乎是一个渲染问题，并且当您在 Chrome 中使用 css 过渡时，硬件加速修复了渲染问题。

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

或者尝试使用媒体查询支持支持视网膜显示图像的设备？

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

媒体查询来源 *

要解决呈现问题，您可以尝试添加-webkit-transform: translateZ(0);到也在页面上包装内容的其他标签。这可以防止加载/渲染问题。