chrome rendert geen GIF achtergrondafbeelding

Momenteel wordt chrome 14 uitgevoerd en wordt er geen renderende gifafbeelding weergegeven op mijn inlogpagina.

Dit is hoe de pagina eruit ziet in chrome:

enter image description here

Hier is hoe het eruit ziet op alle andere browers:

enter image description here

Om te reproduceren:

http://trunk.test.openmile.com/login/#null

Voer een geldig e-mailadres en wachtwoord in en druk op 'login'. Druk op STOP wanneer de zwarte voortgangsindicator verschijnt, zodat de browser geen kans krijgt om u een inlogfout te geven.

Merk op dat de achtergrond niet wordt weergegeven in chrome. Interessant is dat als u het element inspecteert en 1 px toevoegt aan de achtergrondpositie, de afbeelding zichtbaar zal worden.

Ruikt naar een chrome bug voor mij, maar is er een oplossing?

edit: Another really strange thing is: if i put an alert at the end of the function that shows this processing div, after the alert, the background-image becomes visible.

 4
toegevoegd bewerkt
Bekeken: 2
de bron

2 antwoord

Ik kan uw probleem reproduceren, maar als ik handmatig de pop-up in de console activeer, zie ik de spinner prima:

> OM.processing($('div.portlet.login form'));

Dus dit is mijn inschatting: je spinner is niet vooraf geladen en je opent het venster terwijl je op een AJAX-aanvraag wacht. Om welke reden dan ook, andere browsers laden de afbeelding terwijl de AJAX-aanvraag in behandeling is, maar Chrome niet. Om dit te testen, probeerde ik dit in de console:

> var img = $('');

probeerde vervolgens normaal in te loggen - en ik zag de spinner.

Dus ik denk dat als je je spinner-afbeelding vooraf laadt, misschien met de bovenstaande code, en het zou goed moeten werken.

5
toegevoegd
de bron
Als u CSS afhankelijk wilt houden, kunt u deze var bg = $ (this) .css ('background-image') gebruiken; bg = bg.replace ('url (', ''). replace (')', ''); var forceChromeToLoadImage = $ (''); zie stackoverflow.com/questions/8809876/…
toegevoegd de auteur Adrien Be, de bron

Ik kwam problemen tegen bij het gebruik van het antwoord van nrabinowitz.

Dus ik heb uiteindelijk de relevante afbeelding ergens in de pagina met 0 dimensies opgenomen.

HTML:

<input class="button" id="myButton" type="submit" name="searchButton" />
...

javascript:

/*
  Hack for Chrome issue with GIF bg images
    [1] gets the bg url from the CSS
    [2] Extract the path: by removing opening string "url(" and closing character ")" that surround it
    [3] Sets the relevant image tag with our GIF image's path
*/
$('#myButton').click( function() {
    var bg = $(this).css('background-image');  //[1]
    bg = bg.replace('url(','').replace(')','');//[2]
    $('.loaderHackForChrome').att('src', bg);  //[3]
});

source: http://chromespot.com/forum/google-chrome-troubleshooting/4336-background-image-doesnt-load.html

EDIT: this issue may have been fixed now in 2016

0
toegevoegd
de bron