ios - 背景图像在 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 wrapper 。在网站上看起来没问题。所以我只能假设它在我的代码中的某个地方。但是，这并不总是立即在网站上发生。 fiddle 可能会发生这种情况，但我还没有看到它发生。如果是我的站点，我该如何跟踪导致问题的代码？

更新 2

我将背景图片更改为 html、body 标签，问题仍然存在，但没有那么严重，会自行清除。我仍然想知道如何一起防止这个问题。

更新 3

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

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

有问题的站点是 http://www.lfrieling.com/ .我只在运行 iOS 6.1.3(撰写本文时为最新版本)的 iPad Mini 上看到了这一点。我在运行相同版本 iOS 的 iPhone 上看不到这一点。此外，与其他页面相比，您在长页面上看到的更多。请参阅专业 > 资源。

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); 
}

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

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

Media Query source *

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