背景图像在 iOS 中无法正确显示

Posted 2023-03-12

【中文标题】背景图像在 iOS 中无法正确显示

【英文标题】：Background Image not Displaying Correctly in iOS

【发布时间】：2013-05-28 06:18:06

【问题描述】：

我在网站上使用可平铺的背景图片。该网站在所有桌面浏览器中的浏览效果都很好，但是当我在我的 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, bodytags，问题仍然存在，但没有那么严重，并且会自行清除。我仍然想知道如何一起防止这个问题。

更新 3

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

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

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

【问题讨论】：

您是否尝试将图像更改为 png？ PNG 对大多数浏览器更友好。如果你有 Photoshop，你可以保存为 web 并使用渐进式方法

@Riskbreaker - 我会试一试。以前从来没有 jpg 给我带来过问题。

我有一台 iPad（老式）和 Nexus，一切都很好...尝试从这里添加特定于 ipad2（迷你...希望我有一个可以看到您所看到的）：developer.apple.com/library/ios/#DOCUMENTATION/…并将其添加到 body: width: 100%;高度：自动

@Riskbreaker - 不幸的是，这不起作用。我想知道这个问题是否仅限于 iPad mini 或可能是我的 iPad mini。它在我的 iPhone 4 上运行良好，在您的设备上运行良好。感谢您的关注。

我无法在您遇到问题的系统上进行测试。有两件事，但是，我会尝试看看。 (1)html和body上都没有img，把它放在body上。 (2) 尝试去掉.toc上的褪色背景img，看看是否可能导致iPad Mini上的显示问题。

【参考方案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); 添加到也包装页面内容的其他标签中。这可能会阻止加载/渲染问题。

【讨论】：

硬件加速的想法似乎奏效了。在接受之前我需要做更多的测试。此外，iPad Mini 不是 Retina 设备，但对于启用 Retina 的设备来说并不是一个坏主意。谢谢

使用-webkit-transform: translateZ(0); 确实有效，但是有一个问题。在资源页面（网站上最长的页面）上，它停止加载大约一半。如果我删除-webkit-transform: translateZ(0);，它会毫无问题地加载，但线条会回来。为什么这会停止页面的加载？

这会导致 Safari 5.1（我使用的是 Windows，没有更高版本）和 iPad Mini 出现问题。

我相信我解决了渲染问题。我必须将-webkit-transform: translateZ(0); 应用于包含页面上大部分内容的其他元素。在我的情况下#main-content 和#footer。似乎现在正在工作。谢谢。

【参考方案2】：

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

@media 规则

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

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

这就是我认为我对你的帮助。

【讨论】：

感谢您的夸奖。但是，您的回答并没有提供问题的解决方案，我通过@media 定位设备。

【参考方案3】：

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

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

【参考方案4】：

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

【参考方案5】：

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

【参考方案6】：

试试看是否有帮助，

将repeat 添加到#wrap 后，

并将overflow:auto; 添加到.height

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

更新fiddle

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

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

希望这会做..