Safari 渲染图像背景黑色加载

Question

我目前正在网站上工作，但遇到 Safari 问题。加载图像时，有一个黑色背景作为替代。我宁愿它是透明的或白色的，但我似乎无法弄清楚。检查一下：

http://blazing-ocean-6482.herokuapp.com/

我已经让 html 和 body 有背景色：白色；但这似乎并没有改变问题。

Answer 1

只需使用

interlaced

选项保存PNG图像

Answer 2

我在 safari 6 中遇到了同样的问题。 我的图像在灰度色彩空间中。我将其切换为 rgb，问题消失了。 尝试检查您的图像色彩空间设置！

Answer 3

发生这种情况是因为 PNG 没有 alpha 通道。 仅当图像具有透明像素时，Photoshop 才会使用 Alpha 通道保存图像。 为了在 Safari 中正常工作，PNG 图像的 IHDR 块必须在其内容中包含“truecolor-apha”。 您可以在 tweakpng (http://entropymine.com/jason/tweakpng/) 或类似程序中看到 png 块。

Answer 4

我遇到了与上述相同的问题（也仅在 Safari 中）。我的 body 标签有一个背景图片，是 repeat-x 并用作整个网站的背景。当用户转到 Safari 中的页面时，页面加载时会出现黑色闪光。我已经搜索了很长时间来解决这个问题，但它似乎是 Safari 的一个未解决的错误。

我试过在 html 和 body 标签中添加“style: background-color: #FFF”，也尝试过使用老式的“bgcolor: #FFF”——没有用。

让 Safari 正常运行的唯一方法是使用 CSS + jQuery。在你的 html 和 CSS 文件中给正文一个类“bg-on”。在链接的 .js 文件中或在标签中的 html 页面中：

jQuery(function ($) {
$(document).ready(function(){

$('body').removeClass('bg-on');

});//end document ready

/* NOTE (window).load fires when images have been fully loaded */
$(window).load(function() {

$('body').addClass('bg-on');

});//end window load function
});//end jQuery function no conflict mode

上面所做的是当浏览器加载 DOM 时，它从主体中删除类，因此 Safari 不会显示黑色背景，因为那里没有背景图像。然后当 window.load 事件触发时，当所有资产都已加载时，正文被赋予背景图像......

它也不会影响禁用 JS 的浏览器，因为“bg-on”类被硬编码到 html 中。

不是一个特别优雅的解决方案，但它对我有用。

Answer 5

我最近在 Safari 6.0.2 中遇到了这个问题，它也出现在移动版 Safari 中（至少在 iOS 6 中）。将我的背景保存为隔行扫描并不能全面工作，而且颜色空间是 RGB。值得庆幸的是，我的背景颜色很少，将其转换为 GIF 完全解决了这个问题。

Answer 6

我的问题是，我上传了正确的文件，但是使用页面构建器我编辑了图像 - 并从 png 转换为 jpg。 首先用 alpha 制作 png 然后上传 - 工作。

Answer 7

我遇到了类似的问题，相同的图像在 Outlook、OWA 和应用 Icloud Mail 中工作得很好，但是当我在 Icloud 浏览器、safari 或 Firefox 中打开相同的电子邮件时，它会渲染带有错误背景颜色的 PNG，即深色而不是浅色。这个问题是 iCloud 特有的

Answer 8

在 iCloud 邮件桌面客户端上打开相同的电子邮件时，在图像上呈现白色背景，包括 OWA、Outlook 和其他电子邮件客户端。