背景图像在iOS中不能正确显示

我在网站上使用了一个可以打印的背景图片。该网站在所有桌面浏览器中都很棒，但是当我在iPad Mini（运行iOS 6.1.3）上查看网站时，背景图片中有条纹。您可以在大多数页面上看到一个图案（背景图片的大小），看起来很好，然后再次看到相同大小的背景图片等等。

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

iPad错误屏幕截图

这是背景所需的CSS：

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

我试图清除iPad的caching，但没有奏效。为什么会发生这种情况，我感到不知所措。我如何预防和解决这个问题？

更新

我创build了一个jsFiddle的包装。它在网站上看起来不错。所以我只能假定它在我的代码中。但是，这并不总是立即发生在网站上。这可能发生在小提琴，但我没有看到它发生。如果这是我的网站我如何跟踪导致问题的代码？

更新2

我改变了背景图像的html, body标签和问题仍然发生，但没有那么糟糕，将自己清除。我仍然想知道如何一起阻止这个问题。

更新3

我尝试了@Freezebreaker的切换到PNG的想法。这没有奏效。我仍然看到线。它也大大增加了背景文件（从30k到几乎200k）。我也尝试了一个完全不同的背景图像，认为它可能是图像本身，但我仍然看到了错误。为了考虑文件大小，我切换回了jpg。

我如何解决这个问题？这是一个iOS问题或在我的代码中的东西？

有问题的网站是http://www.lfrieling.com/ 。我只能在运行iOS 6.1.3的iPad Mini上看到这一点（本文最新）。我没有看到我的iPhone运行相同版本的iOS上的这个。你也可以在长页面看到比其他页面更多的内容。请参阅专家>资源。

你有没有尝试硬件加速？添加-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); 到其他标签，也包装页面上的内容。这可能会阻止加载/渲染问题。

琳达首先这是一个很好看的网站。其次，你应该考虑这两个build议：

这就是我想我已经帮助你。

尝试添加-webkit-background-size到body标签：

 body { -webkit-background-size: 512px 512px; }

试试这个，这可能对你有帮助。添加overflow: hidden; height: 1%; overflow: hidden; height: 1%; 到你的#wrap 。

你有没有尝试过background: #B3B1B2 url(/images/bgs/parchment2.jpg) repeat; 。不知道它会解决问题，我没有一个iPad来testing它，但它是值得一试。

试试如果这可能有帮助，

在向#wrap添加repeat #wrap ，

并添加overflow:auto; .height

因为图像大小是512×512，高度是2000。

更新的小提琴

我不确定这会工作，但问题是，当渲染内部图像无法正确呈现背景时，

仅供参考：-webkit-transform：使用gpu，所以如果设备不支持gpu，那么你也将面临问题。

希望这会做..