6

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

这是显示问题的屏幕截图：

iPad 错误截图

这是背景所需的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 上看到这一点（撰写本文时的最新版本）。我在运行相同版本 iOS 的 iPhone 上看不到这一点。您在长页面上看到的也比其他页面更多。请参阅专业 > 资源。

4

6 回答 6

4

你试过硬件加速吗？添加-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);其他标签，这些标签也在页面上包装内容。这可以防止加载/渲染问题。

于 2013-06-04T22:15:10.363 回答
0

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

body {
    -webkit-background-size: 512px 512px;
}
于 2013-06-07T08:02:20.800 回答
0

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

于 2013-06-09T08:46:05.097 回答
0

Lynda 首先这是一个好看的网站。其次，您应该考虑这两个建议：

  1. @media 规则

    并为每个设备编写一个 CSS 文件规则（这里是一些媒体列表）

  2. 在任何屏幕尺寸（包括台式机、平板电脑、电视和手机）上测试您的网站。

这就是我认为我帮助你的全部。

于 2013-06-05T10:01:20.150 回答
0

试试这是否有帮助，

添加repeat到后#wrap，

并添加overflow:auto;到.height

因为图像尺寸为 512x512，.height 为 2000。

更新的小提琴

我不确定这是否可行，但问题是在渲染内部图像时无法正确渲染背景，

仅供参考：-webkit-transform：使用 gpu，因此如果设备未启用 gpu，那么您也将面临问题..

希望这会做..

于 2013-06-10T12:24:20.217 回答
0

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

于 2013-06-09T08:25:47.740 回答