malsup/cycle — Issue #97: Disappearing Images in Chrome17
Author: Gordonsexton
Created: 2012-02-14 00:51:59+00:00
State: open

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 );
}
});