Disappearing Images with Jquery Cycle Plugin in Chrome17

Question

I'm using the Jquery Cycle plugin to transition between a series of div's with a background image that are sized using the background-size="cover" attribute. After every transition I'm giving the visible slide an active class that transitions in a piece of text using css3. This has worked for months in every modern browser until recently, Chrome 17 seems to be the only one that it doesn't want to work in. The text on the image still appears when you go to the slide but the background image is blank. The problem doesn't occur every time but does on about 4/5 page loads. This makes me think it might have to do with the speed in which the images/script loads in at. The Funny thing is, the images and everything are there but will only appear if you go to the inspector window and click on one of the 'element.style' attribute check boxes.

Here's my code and the url. Any help would be very appreciated.

Example: blindbarber.vaesite.com

$('#slideshow').cycle({

     pager:  '#pagination',
     fit: 1,
     fx:  'fade',
     speed:  500,
     timeout: 0, 
     next:   '#next', 
     prev:   '#prev',
     updateActivePagerLink: function update(pager, activeIndex) { 
         $(pager).find('a:eq('+activeIndex+')').addClass('activeSlide').siblings().removeClass('activeSlide');
         movePager(); 
     },
     before: function() {
       $(".active").removeClass('active')
       $('.slide').css({"position": "absolute"});
     },
     after: function() {
       $(this).addClass('active');
        $('.slide').css({"position": "absolute"});
     } 
  });

 function movePager() {
   var move = $(".activeSlide").offset();
    $("#active-slider").animate({'left': move.left }, 500 );
   }
 });

Steven Sloan Steven Sloan · Accepted Answer · 2012-02-23T18:37:49

I ran into this issue as well - looks like a fix will be in the next release of chrome http://code.google.com/p/chromium/issues/detail?id=111218#makechanges

edit: So what I figured out for a fix, is to run this function as the before transition callback

function chromeFix( currSlideElement, nextSlideElement, options, forwardFlag ) {

  var self = $( nextSlideElement );
  var src = self.css('backgroundImage');

  self.css('backgroundImage', '').css('backgroundImage', src);

}

it looks like you're running your own, but basically unsetting, then setting back the background image does the trick

Disappearing Images with Jquery Cycle Plugin in Chrome17

1 Answers