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

9 回答 9

3

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

我通过将网络图像重新保存为

  • 至少10px宽
  • 将它们保存为非隔行PNG

这立即解决了我的问题。

于 2012-10-08T16:39:02.810 回答
1

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

于 2013-02-19T02:04:09.937 回答
1

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

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

于 2012-09-25T22:18:24.467 回答
1

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

于 2012-11-22T04:28:09.807 回答
0

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

于 2012-09-27T10:33:29.437 回答
0

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

只发生在ios6上。

于 2012-09-26T14:57:02.010 回答
0

我们遇到了类似的问题。

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

我们的网站上有许多 PNG 背景，但只有两个特定的 PNG 没有正确显示。所以我们认为这两个特别是在他们第一次创建时被小故障或其他东西保存了。

谁知道。耸耸肩

于 2012-09-27T01:50:02.483 回答
0

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

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

只是我的经验

于 2012-10-06T01:30:21.730 回答
0

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

于 2012-10-22T12:40:41.460 回答