Question

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

Answer 1

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

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

至少10px 宽
将其保存为 非隔行扫描 PNG

这立刻解决了我的问题。

Answer 2

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

我发现新的远程检查员（这里提到：http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-developers）对于确定发生了什么非常有用。

Answer 3

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

Answer 4

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

Answer 5

这里有类似的问题。我网站（http://paulcremoux.com/en/trabajo/）工作部分下的所有页面都有很长的页面。图像通常在完成之前停止加载;其他时候他们加载然后崩溃。（你必须看看几个页面，因为它起初似乎工作正常。）

仅发生在ios6上。

Answer 6

我们遇到了类似的问题。

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

我们网站上有许多PNG背景，但只有两个特定的PNG无法正确显示。因此，我们估计可能这两个人在第一次创建时会被毛刺或其他东西保存下来。

谁知道呢。耸肩

Answer 7

在iOS6 Safari下遇到同样的问题。一个看起来是黑色的repeat-x .PNG背景图像。在沉重的时间压力下，我将其保存为.JPG并解决了渲染问题。

Answer 8

对我来说有用的不一样：

通过删除隔行扫描来处理的一些图像
有些图片我删除了隔行扫描，但之后也不得不删除透明度，这似乎解决了问题
我试图弄乱宽度，但我不认为那是。

只是我的经历

Answer 9

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

iPad / ios 6没有渲染png背景图片

9 个答案: