logo标签列表

CSS背景图片在Chrome中消失

cssmacosgoogle-chromebackgroundbackground-image
12
This problem is only happening in Google Chrome on Mac OS X (Chrome 17). I've tested it on all the major browsers on Mac and Windows 7.
Here is the page in question: http://dealsfortherich.com/drop/ As you can see, I'm loading divs via JQuery AJAX. The page is always fine on "Refresh." You can navigate pages with the left and right arrows. The problem happens when you change pages; especially when you change pages when scrolling the page quickly. Try scrolling the page down very fast and hit the right arrow. The background images that were already loaded via CSS (for example):
.sort_block{ background: url(images/sort_block.png) no-repeat;}

开始消失。只有使用CSS加载的背景图像才会消失。所有 都没问题。如果在Chrome中打开开发人员工具检查元素，您会发现浏览器具有正确的语法，并已将图像下载到其缓存中。由于某种原因，它只是无法显示它。CSS显示值是正确的。在检查器中，对于缺少背景的div，如果修改诸如“top：8px;”之类的值为“top：9px;”，则图像突然出现。
这仅在Chrome（v.17）和Chrome Canary（v.19）的Mac OS X（10.7.3）上发生。我应该向Google报告此错误，还是有已知的解决方法或修复方法？我想我可以用s替换s，但我宁愿正确地做并解决这个奇怪的问题。
就我所知，我刚遇到了一个类似的问题，即使用数据URL作为背景图片时，如background: url(data:image/png;base64,...)在Chrome上无法显示，但在Firefox上可以。我不认为这与AJAX有任何关系。 - icedwater
5个回答
9
1
谢谢，那个 bug 正是我遇到的问题，这些只发生在之前被隐藏的 div 上。 - daSong
2
这个解决方法对我有用：http://blog.andrewcantino.com/blog/2012/02/15/fixing-the-chrome-background-refresh-bug/ - daSong
1
该问题已经被修复并合并到开发和测试频道中： http://code.google.com/p/chromium/issues/detail?id=111218#c43截至今天，看起来它还没有推向稳定版本，但这应该很快就会发生。您可以关注 http://googlechromereleases.blogspot.com/ 但这只是几天的事情。 - Paul Irish
3
我曾经遇到过同样的问题，诊断了几个小时，但这与你的代码无关，而是最新版Chrome中与内存相关的错误。根据我的经验，它不会发生在小图片上，因此一个临时解决方案是减小文件大小（到10kB以下）。
我这里有一个测试文件，展示了大背景图和小背景图之间的差异。

http://kolina.fi/chrometest.html

是的，自从我创建这个问题以来，我发现在code.google.com上至少有4个未解决的问题： http://code.google.com/p/chromium/issues/detail?id=111218 http://code.google.com/p/chromium/issues/detail?id=70268 http://code.google.com/p/chromium/issues/detail?id=109049 http://code.google.com/p/chromium/issues/detail?id=113774看起来这是Chrome 17在Mac上的webkit购买。 - daSong
2
1
或者在一行中 var fix = function($s){ var $s.css("background-image", $s.css("background-image")); }，然后你可以这样使用它... fix($(".myselector")) - Tom Roggero
1

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

例如，将url(images/image.png)更改为完整的URL。

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

-3
使用:url(.//images路径。.//应该可以解决问题。
1
根据其他用户提供的信息，似乎这不是一个解决方案。你测试过这段代码吗？ - Scott Solmer
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接