背景图像在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时没有看到这个。你也可以在长页面上看到比其他页面更多的内容。见专业＆gt;资源。

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

Media Query source *

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

Answer 2

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

1. @media规则

   并为每个设备写一个CSS文件规则（这里有一些List of medias）

2. Test your website on any screen size including desktops, tablets, televisions, and mobile phones.

多数民众赞成我觉得我帮助了你。

Answer 3

尝试将-webkit-background-size添加到正文标记：

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

Answer 4

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

Answer 5

您是否尝试过background: #B3B1B2 url(/images/bgs/parchment2.jpg) repeat;。不确定它会解决问题，我没有iPad来测试它，但值得一试。

Answer 6

尝试这可能会有所帮助，

将repeat添加到#wrap之后

，

并将overflow:auto;添加到.height

因图像尺寸为512x512而且.Hight为2000。

更新fiddle

我不确定这会有效，但问题是在渲染内部图像时无法正确渲染背景，

仅供参考：-webkit-transform：使用gpu，所以如果设备没有启用gpu，那么你也会遇到问题..

希望这样做..