iPad / ios6无法渲染png背景图像

7

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

我们能否获得您网站的链接?也许还有其他问题。 - Kyle
很遗憾,目前还无法实现。我希望其他人在升级到iOS 6后是否遇到过类似的问题,并且可能已经找到了答案。 - John
9个回答

3
我在我们的一个网站上也遇到了这个问题。我有一个移动站点,使用背景PNG图像作为渐变,但在iOS6(Chrome和Safari应用程序)上会显示为黑色条纹。
我通过将图像重新保存为网络图像并进行以下操作轻松解决了这个问题:
  • 宽度至少为10px
  • 保存为非交错式PNG格式
这立即解决了我的问题。

iOS 足够智能,支持 1 像素宽的图片。我怀疑精度是潜在问题——也许与宽度小有关? - Zenexer
只需将图像保存为非交错PNG格式即可完美解决我的问题。 - mixable

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

1
我在一个Web服务器上遇到了这个问题。解决方法是将PNG从8位整数精度更改为32位。显然,iOS无法正确处理8位;我不知道16位的情况。我认为Photoshop可能会由于图像的低复杂性(简单的渐变)自动执行此操作。在GIMP中很容易修复:图像 -> 精度 -> 32位整数

注意:该图像未进行交错处理,且仅为一个像素宽度。 - Zenexer

1

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

我发现新的远程检查器(在此处提到:http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-developers)非常有用,可以确定发生了什么。


0

对我有效的并不适用于所有人:

  • 有些图片只需去除交错即可解决问题
  • 有些图片需要去除交错和透明度,这样才能解决问题
  • 我尝试调整宽度,但我认为这也不是解决问题的方法。

这只是我的经验


0

这里有类似的问题。我网站工作部分(http://paulcremoux.com/en/trabajo/)下的所有页面都有一个长的png图片。经常在图片加载完成之前就停止加载;其他时候它们会加载然后崩溃。(您必须查看几个页面,因为一开始可能看起来没问题。)

只在ios6上发生。


0

我们遇到了类似的问题。

我们只是在PhotoShop中打开PNG并重新保存它,之后它就正常显示了。我们没有更改颜色配置文件或任何其他设置 - 只是打开它,保持所有设置不变,然后再次保存,然后就好了。

我们网站上有许多PNG背景,但只有两个特定的PNG无法正确显示。因此,我们认为可能是这两个特定的PNG在最初创建时存在故障或其他问题。

谁知道呢。耸肩


0

刚刚遇到了同样的问题,在iOS6 Safari下。一个重复-x的.PNG背景图片显示为黑色。在时间紧迫的情况下,我将其保存为.JPG格式并解决了渲染问题。


1
这不算是一种答案吗?设备具有不同的能力。这难道不是一种解决方案吗? - Kir

0

刚遇到了和这个一样的问题,重新保存已去除交错的.png解决了问题。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接