CODEWITHSUNDEEP
javascriptjqueryhtmlcssgoogle-chrome
elsherbini
elsherbini

Reputation: 1626

Dynamically loaded CSS background-image not shown in Chrome

I am making a github gist gallery for organizations, which you can see at elsherbini.github.io/gist-gallery.

The thumbnails are placed on the page by javascript, and the background image is set as an inline style rule. In Firefox and Internet Explorer the background image is shown, while in Chrome and Safari it is not.

In firefox, the following code returns the correct url of the background image, while in chrome it returns "none":

$($(".thumbnail")[0]).css("background-image")

As a result I cannot use the following fix by andrew cantino:

function refreshBackgrounds(selector) {
  // Chrome shim to fix http://groups.google.com/a/chromium.org/group/chromium-bugs/browse_thread/thread/1b6a86d6d4cb8b04/739e937fa945a921
  // Remove this once Chrome fixes its bug.
  if (/chrome/.test(navigator.userAgent.toLowerCase())) {
    $(selector).each(function() {
      var $this = $(this);
      if ($this.css("background-image")) {
        var oldBackgroundImage = $this.css("background-image");
        setTimeout(function() {
          $this.css("background-image", oldBackgroundImage);
        }, 1);
      }
    });
  }
}

I have tried adding single quotes to the url as some have suggested when similar issues have arisen for others. If I look at the network tab, it never even makes requests for the images. If I manually set the background image property as a new rule in chrome devtools, it works, so I know it is not an issue with the format of the url or a silly syntax error.

Is there a workaround to this bug in chrome?

Upvotes: 0

Views: 1252

Answers (2)

johnwait
johnwait

Reputation: 1134

Also (or rather), in my browser the background-image styles are not parsed properly because of the missing closing parenthesis of the url() declarations. Fix that and then the background-image's can be retrieved using $().css().

Details: I see

 <a style="background-image: url(https://../thumbnail.png" class="gist thumbnail" href="..">

It should be

 <a style="background-image: url(//../thumbnail.png)" class="gist thumbnail" href="..">

Upvotes: 1

charles
charles

Reputation: 547

Change $this.css("background-image", oldBackgroundImage); to $this.css('background-image', 'url(' + oldBackgroundImage + ')');

Upvotes: 0

Related Questions