iOS中背景图片显示不正确

Question

iOS中背景图片显示不正确

6

我在网站上使用了可平铺的背景图片。在所有桌面浏览器中，该站点的效果都很好，但是当我在我的iPad Mini上（运行iOS 6.1.3）查看网站时，背景图像会出现条纹。您可以在大多数页面上看到一个模式，即一条线（背景图像的大小）看起来很好，然后再次出现与背景图像相同大小的另一条线等等。

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

以下是所需背景的CSS：

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

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

更新

我创建了一个包装器的jsFiddle，在网站上看起来还好。所以我只能假设是代码中的某处出了问题。然而，这并不总是立即发生在网站上。它可能在Fiddle上发生，但我没有看到它发生过。如果是我的网站，我该如何跟踪造成这个问题的代码？

更新2

我将背景图像改为了html，body标签，问题仍然存在，但并不严重，并且会自动清除。我仍然想知道如何完全避免这个问题。

更新3

我尝试了@Riskbreaker的想法，切换到PNG格式，但没有起作用。我仍然看到那些线条。这也大大增加了背景文件的大小（从30k增加到了近200k）。我也尝试了一张完全不同的背景图片，以为可能是图片本身的问题，但我仍然看到错误。出于文件大小方面的考虑，我切换回了jpg格式。

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

所涉及的网站是http://www.lfrieling.com/。我只在运行最新版本iOS 6.1.3的iPad Mini上看到这种情况。我在运行相同iOS版本的iPhone上没有看到这种情况。长页面比其他页面更容易出现此问题。请查看Professional > Resources页面。

- L84

尝试将其从HTML和body中移除，仅在body上使用它。还要使用background:＃B3B1B2 url（/images/bgs/parchment2.jpg）repeat center; 看看是否有效。否则，一个简单的选择就是保持背景颜色。在背景上加载大量图像往往会严重拖慢网站速度。 - ClosDesign

@Lynda：我仍然很好奇，如果移除.toc元素上的淡出背景是否会影响页面背景的渲染（我意识到您感到有问题的不是特定的元素）。您已经注意到的两个主要页面具有相当大的该元素大小（即它与您在问题中提到的“长页面”评论相关）。 - ScottS

@ScottS - 我没有尝试过删除它，但我觉得这不是问题，因为我在没有页面上任何地方有 .toc 类的页面上看到了这个问题。 - L84

@Lynda：没错，但是你在.left-navi类上也使用了相同的渐变淡出效果（我认为这些页面上没有.toc），因此它会显示在其他页面上。在那些页面上，.toc只是更长而已，似乎是一个很好的测试用例，可以将背景淡化效果去掉，以查看它是否是问题的根源。 - ScottS

@ScottS - 我尝试从页面中移除这些类，但错误仍然发生。迄今为止似乎唯一有效的解决方案是Jason建议的方法。然而，这可能会导致另一个错误，在我确认是由那段代码还是我的代码引起之前，我必须先检查这个错误。 - L84

显示剩余5条评论

6个回答

0

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

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

- PoseLab

0

尝试这个，它可能会对你有所帮助。在#wrap中添加overflow: hidden; height: 1%;。

- Bhojendra Rauniyar

0

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

- Goran Lepur

0

尝试一下这个方法，

在#wrap中添加repeat，

并在.height中添加overflow:auto;,

因为图像大小为512x512，而.height为2000。

更新 fiddle

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

FYI: -webkit-transform：使用GPU，所以如果设备没有启用GPU，则仍然会遇到问题..

希望能解决问题。

- MarmiK

0

Lynda，首先这是一个外观不错的网站。其次，您应该考虑以下两点建议：

@media规则

并为每个设备编写CSS文件规则（这里有一些媒体列表）
在任何屏幕尺寸上测试您的网站，包括桌面、平板电脑、电视和手机。

我想这就是我能帮助您的全部了。

- ucefkh

谢谢您的赞美。然而，您的答案并没有提供问题的解决方案，我是通过@media来指定设备的。 - L84

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jason Lydon · Accepted Answer

你尝试过使用硬件加速吗？在添加背景的css中添加-webkit-transform: translateZ(0);。我猜测这是因为它似乎是一个渲染问题，当你在Chrome中使用css转换时，硬件加速可以解决渲染问题。

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

或许可以使用媒体查询，对于支持Retina显示屏的设备提供Retina显示屏图像？

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

媒体查询源代码*

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