cycle
cycle copied to clipboard
malsup
Disappearing Images in Chrome17
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 );
}
});
Try declare slideResize: 0, works for me :)
Update: my miss, still no image :(
Apparently its a problem with background images in crome 17. I did find a fix but its not pretty.
http://blog.andrewcantino.com/blog/2012/02/15/fixing-the-chrome-background-refresh-bug/
added a chromeFix (code from others) with https://github.com/smooshy/cycle/commit/95a029576a72dfd28367e00815e8cae3a7cc84d7 and created a pull request (https://github.com/malsup/cycle/pull/99).
Plugin from malsup: https://gist.github.com/1855806/9fd3f9d9b2f7e8223b0b96d64bf126b33ef5c7ac
Looks like there maybe be a webkit fix sooner than later: http://code.google.com/p/chromium/issues/detail?id=111218#makechanges