CSS背景图像在Chrome中消失

Posted 2023-03-06

【中文标题】CSS背景图像在Chrome中消失

【英文标题】：CSS background image disappearing in Chrome

【发布时间】：2012-03-05 18:09:58

【问题描述】：

此问题仅发生在 Mac OS X (Chrome 17) 上的 Google Chrome 中。我已经在 Mac 和 Windows 7 上的所有主要浏览器上对其进行了测试。

这里是有问题的页面： http://dealsfortherich.com/drop/

如您所见，我正在通过 JQuery AJAX 加载 div。 页面在“刷新”时总是很好。 您可以使用左右箭头浏览页面。换页时会出现问题；特别是当您快速滚动页面时更改页面。尝试快速向下滚动页面并点击右箭头。 已经通过 CSS 加载的背景图片（例如）：

.sort_block background: url(images/sort_block.png) no-repeat;

开始消失。只有加载了 CSS 的背景图像才会开始消失。一切都很好。如果您在 Chrome 上打开开发者工具检查元素，您将看到浏览器具有正确的语法并且它已经将图像下载到其缓存中。由于某种原因，它只是无法显示它。 CSS 显示值正确。在Inspector中，对于缺少背景的div，如果修改“top:8px;”这样的值到“顶部：9px；”图像突然出现。

这仅在适用于 Mac OS X (10.7.3) 的 Chrome (v. 17) 和 Chrome Canary (v. 19) 中发生。 我应该向 Google 报告此错误还是有已知的解决方法或修复？我想我可以将 s 替换为 s，但我宁愿正确地做到这一点并解决这个奇怪的问题。

【问题讨论】：

对于它的价值，我刚刚遇到了与背景图像作为数据 url 的类似问题，即 background: url(data:image/png;base64,...) 不显示在 Chrome 上，但它适用于 Firefox。我认为这与 AJAX 无关。

【参考方案1】：

我不知道这是否是同一个问题，但根可能是相同的：http://code.google.com/p/chromium/issues/detail?id=111218。根据该报告，我认为还没有已知的修复方法。

【讨论】：

谢谢，这个错误正是我所遇到的，这些只发生在以前隐藏的 div 上。

这个解决方法为我解决了这个问题：blog.andrewcantino.com/blog/2012/02/15/…

此问题已修复并合并到开发和测试渠道中：code.google.com/p/chromium/issues/detail?id=111218#c43 截至今天，它看起来还没有发布到稳定版，但应该很快就会发生。你可以看googlechromereleases.blogspot.com，但应该是几天的事情。

【参考方案2】：

我遇到了同样的问题并诊断了几个小时，但这与您的代码无关，它是最新 chrome 中与内存相关的错误。根据我的经验，小图像不会发生这种情况，因此临时解决方案是减小文件大小（降低到 10kB 左右）。

我这里有一个测试文件，显示大背景图片和小背景图片的区别。

http://kolina.fi/chrometest.html

【讨论】：

是的，自从创建这个问题后，我发现在 code.google.com 上至少有 4 张未处理的票证：code.google.com/p/chromium/issues/detail?id=111218code.google.com/p/chromium/issues/detail?id=70268code.google.com/p/chromium/issues/detail?id=109049code.google.com/p/chromium/issues/detail?id=113774 看起来是购买适用于 Mac 的 Chrome 17 上的 webkit。

【参考方案3】：

在 Chromium/Chrome “修复故障”（嗨，Milton）之前，我们为此问题制定了解决方案...

我的同事 Andrew 在此处发布了我们的解决方案： http://blog.andrewcantino.com/blog/2012/02/15/fixing-the-chrome-background-refresh-bug/

您可以在以下位置查看相关页面： http://www.mavenlink.com/tour

听起来这也适用于其他人，但它很难看！

【讨论】：

或者在一行var fix = function($s) var $s.css("background-image", $s.css("background-image")); 然后你就可以把它当作... fix($(".myselector"))

【参考方案4】：

我最近遇到了这个问题，解决方法是使用完整的 url，而不是相对路径。

例如更改url(images/image.png)

到

url("http://yoursite.com/images/image.png")

【参考方案5】：

使用 :url(.//images 路径。.// 应该可以解决问题。

【讨论】：

根据其他用户提供的信息，这似乎不是一个解决方案。你测试过这段代码吗？