CSS image d'arrière-plan en train de disparaître dans Chrome
Ce problème est seulement dans Google Chrome sur Mac OS X (Chrome 17). Je l'ai testé sur tous les principaux navigateurs sur Mac et Windows 7.
Voici la page en question:
http://dealsfortherich.com/drop/
Comme vous pouvez le voir, je suis de chargement divs via AJAX de JQuery.
La page est toujours d'amende pour "Rafraîchir."
Vous pouvez naviguer entre les pages avec les flèches gauche et droite. Le problème se produit lorsque vous modifiez les pages, en particulier lorsque vous modifiez les pages en faisant défiler la page rapidement. Faites défiler la page vers le bas très rapidement et frapper la flèche de droite.
Les images de fond qui ont déjà été chargé via CSS (par exemple):
.sort_block{ background: url(images/sort_block.png) no-repeat;}
commencent à disparaître. Seulement les images d'arrière-plan qui sont chargés avec CSS commencent à disparaître. Tous sont très bien. Si vous ouvrez sur les Outils de développement de Chrome inspecter les éléments, vous verrez que le navigateur a la syntaxe correcte et il a déjà téléchargé l'image dans son cache. Pour une raison quelconque, il est juste à défaut d'affichage. Le CSS de la valeur d'affichage est correct. Dans l'Inspecteur, pour la div avec le manque de fond, si vous modifiez une valeur telle que "top: 8px;" à "top: 9px;" l'image apparaît soudainement.
C'est seulement dans le Chrome (v. 17) et Chrome Canary (v. 19) pour Mac OS X (10.7.3).
Dois-je signaler ce bug de Google ou est-il connu de contourner ou résoudre? Je suppose que je peux remplacer le s avec s mais je préfère le faire correctement et résoudre cette étrange question.
background: url(data:image/png;base64,...)
ne s'affiche pas sur Chrome, mais il fonctionne sur Firefox. Je ne pense pas que cela ait quelque chose à voir avec l'AJAX.
OriginalL'auteur daSong | 2012-02-14
Vous devez vous connecter pour publier un commentaire.
Je ne sais pas si c'est le même problème, mais la racine est probablement la même chose: http://code.google.com/p/chromium/issues/detail?id=111218. Sur le rapport, je ne pense pas qu'il y est un correctif encore.
Cette solution résout le problème pour moi: blog.andrewcantino.com/blog/2012/02/15/...
Ce problème a été corrigé et fusionnés en dev et bêta des canaux: code.google.com/p/chromium/issues/detail?id=111218#c43 aujourd'hui, on dirait qu'il n'a pas encore été envoyés à "stable", mais qui devrait bientôt arriver. Vous pouvez regarder les googlechromereleases.blogspot.com, mais ça doit être une question de jours.
OriginalL'auteur ior3k
J'ai eu le même problème et a diagnostiqué pendant des heures, mais ce n'est pas votre code, c'est un souvenir lié bug dans le dernier chrome. Dans mon expérience, il ne se produit pas pour les petites images, donc une solution temporaire serait de diminuer la taille du fichier (à moins de 10 ko).
J'ai un fichier de test ici, montrant la différence entre une grande et une petite image de fond.
http://kolina.fi/chrometest.html
OriginalL'auteur Qha
Nous avons travaillé en place une solution pour ce problème jusqu'à ce que le Chrome/Chrome "résout le problème" (hi, Milton)...
Mon collègue Andrew, posté notre solution ici:
http://blog.andrewcantino.com/blog/2012/02/15/fixing-the-chrome-background-refresh-bug/
Vous pouvez voir la page en question:
http://www.mavenlink.com/tour
Il semble que cela a fonctionné pour d'autres, mais c'est moche!
var fix = function($s){ var $s.css("background-image", $s.css("background-image")); }
et puis vous pouvez l'utiliser comme...fix($(".myselector"))
OriginalL'auteur rcneel
J'ai récemment eu ce problème, et la solution était d'utiliser l'url complète, plutôt que d'un chemin d'accès relatif.
E. g. changement
url(images/image.png)
à
url("http://yoursite.com/images/image.png")
OriginalL'auteur Chris Edwards
Utilisation :url(.//les images de chemin. L' .//devrait résoudre le problème.
OriginalL'auteur Yorik