iPad / ios6不渲染png背景图片答案

【问题标题】：iPad / ios6 not rendering png background imageiPad / ios6不渲染png背景图片
【发布时间】：2013-02-19 10:31:52
【问题描述】：

在 ios5 上，网站加载正常且看起来正确。

从 ios6 开始，我网站中使用 png 图像作为背景的部分开始在 iPad 上呈现，但随后背景无缘无故地变为黑色（注意所有其他部分保持正确的颜色）。

代码：

<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>

CSS：

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

【问题讨论】：

我们可以提供一个指向您网站的链接吗？也许还有其他问题。
不幸的是，目前不可能，我希望其他人在升级到 ios6 后可能遇到过类似的问题，并且可能已经找到了答案。

标签： html css ipad png ios6

【解决方案1】：

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

我通过将网络图像重新保存为轻松修复它们

至少 10px 宽
将它们保存为 非交错 PNG

这立即解决了我的问题。

【讨论】：

iOS 足够智能，可以支持 1px 宽的图像。我怀疑精度是根本问题——也许再加上小宽度？
仅将图像保存为非隔行 PNG 对我来说效果很好

【解决方案2】：

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

我发现新的远程检查器（此处提到：http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-developers）对于确定发生的事情非常有用。

【讨论】：

【解决方案3】：

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

【讨论】：

注意：图像是/不是交错的，并且是/是一个像素宽。

【解决方案4】：

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

【讨论】：

【解决方案5】：

这里有类似的问题。我网站 (http://paulcremoux.com/en/trabajo/) 的工作部分下的所有页面都有一个长 png。通常图像在完成之前就停止加载；其他时候他们加载然后崩溃。（您必须查看其中的几页，因为它一开始似乎可以正常工作。）

仅在 ios6 上发生。

【讨论】：

【解决方案6】：

我们遇到了类似的问题。

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

我们的网站上有许多 PNG 背景，但只有两个特定的 PNG 无法正确显示。因此，我们认为这两个特别是在首次创建时可能会因故障或其他原因而被保存。

谁知道呢。 耸耸肩

【讨论】：

【解决方案7】：

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

【讨论】：

怎么不是答案？设备具有不同的功能。这是一个解决方案不是吗？

【解决方案8】：

对我有用的东西对所有人都不一样：

通过去除隔行扫描来处理一些图像
一些图像我删除了隔行扫描，但随后也必须删除透明度，这似乎解决了问题
我试图弄乱宽度，但我认为也不是这样。

只是我的经验

【讨论】：

【解决方案9】：

刚刚遇到与此相同的问题，重新保存 .png 并删除隔行扫描解决了问题。

【讨论】：