Html iPad/ios6未呈现png背景图像

在ios5上，网站加载良好，看起来正确

由于ios6，我的网站中使用png图像作为背景的部分开始在iPad上渲染，但随后背景会在没有明显原因的情况下变为黑色（请注意，所有其他部分都保持正确的颜色）

代码：

---

我不确定这是否有直接关系，但昨晚我遇到了类似的问题。我正在使用图像的相对URL，发现iOS6将图像路径中的空格编码为%2520，而不是%20。这对我来说是个问题，因为我在模拟器上的应用程序中查看web视图中的图像资源，所以模拟器提供的资源路径中有空格。这在路径中没有空格的设备上不是问题

---

我发现新的远程检查器（这里提到：）在确定发生了什么方面非常有用。

这里也有类似的问题。我的网站（）工作区下的所有页面都有一个长png。通常图像在完成之前就停止加载；其他时候，它们会加载，然后崩溃。（你们必须看几页，因为一开始它可能工作得很好。）

---

只发生在ios6上。

我们遇到了类似的问题

我们刚刚在PhotoShop中打开PNG并重新保存，然后它显示正常。我们没有更改颜色配置文件或类似的内容-只是打开它，保持所有设置不变，然后再次保存，然后就没事了

我们的网站上有很多PNG背景，但只有两个PNG没有正确显示。所以我们认为，也许这两个人在最初被创造出来的时候，由于小故障或其他原因而得以保存

---

谁知道呢。耸耸肩

在iOS6 Safari下也遇到了同样的问题。显示为黑色的repeat-x.PNG背景图像。在巨大的时间压力下，我将其保存为.JPG并解决了渲染问题。

对我来说，对所有人来说都不一样：

• 有些图像是通过去除隔行扫描来工作的
• 有些图像我删除了交错，但后来不得不删除透明度，这似乎解决了问题
• 我试图弄乱宽度，但我认为也不是这样

---

根据我的经验

我在我们的一个网站上也遇到了这个问题。我有一个移动站点，使用背景PNG图像进行渐变，在iOS6（Chrome和Safari应用程序）上显示为黑条

我通过将图像重新保存为web，轻松地修复了它们

• 宽度至少为10px
• 将它们保存为非交错的

---

这立即解决了我的问题。

刚刚出现了一个与此相同的问题，在删除隔行扫描的情况下重新保存

.png

解决了问题。

我刚刚在Web服务器上遇到这个问题。解决方案是将PNG从8位整数精度更改为32位。显然，iOS无法正确处理8位；我不知道16位。我认为Photoshop可能已经自动完成了这项工作，因为图像的复杂性很低（一个简单的渐变）。在GIMP中很容易修复：

Image->Precision->32位整数

更改img的大小似乎很有效，但缩放时会出现一些奇怪的问题。。。最终，对我来说，最好的解决方案是将图像保存为jpg。

我们可以获得到您网站的链接吗？可能还有其他问题。不幸的是，目前不可能，我希望其他人在升级到ios6后可能也有类似的问题，并且可能已经找到了答案。为什么这不是一个答案？设备具有不同的功能。这是一个解决方案，不是吗？注意：图像是/不是隔行扫描的，并且是/是一个像素宽。iOS足够智能，可以支持1px宽的图像。我怀疑精度是根本的问题——也许再加上较小的宽度？只需将图像保存为非隔行PNG就可以了

<section id="showcase">
    <section class="container">
    <img src="images/usp.jpg" alt="USP Screen" id="screen">

    <h2>title</h2>    

    <p>the text.</p>

    <p>The text.</p>
    </section></section>

#showcase           { background: url(../images/showcasebg.png) repeat-x #ededed; height: 600px; position: relative; top: 87px; }
#showcase h2        { float: left; max-width: 422px; font-family: 'Lobster', cursive; font-size: 36px; margin-top: 20px; }
#showcase p         { float: left; max-width: 422px; margin-top: 20px; }