Disappearing images in IE8 jQuery Cycle

Question

http://www.lunatestsite.co.uk/products/lifestation

Cannot for the life of me fix this. Only in IE8 so far. I had the same issue on the homepage cycle, but managed to

Answer 1

Change

img {
    max-width: 100%;
}

to

img {
    max-width: auto;
}

Answer 2

If you want to keep the

max-width: 100%;

then also add

width: auto;

OR remove the explicit width and height attributes from the HTML

OR put the image in a non-floated container

OR assign the container a specific width.

There is a pretty good article on this bug here:

http://www.456bereastreet.com/archive/201202/using_max-width_on_images_can_make_them_disappear_in_ie8/

Answer 3

It sounds like the images are still loading.

Try this...

$(window).load(function() {
    $('#product-images, #front-slides').cycle({
        timeout: '7000',
        next: '#next',
        prev: '#prev',
        pager: '#pager',
        pagerAnchorBuilder: function(idx, el) {
                return '<a href="#"></a>';
            }
    });
 });

window.load() will fire after the DOM and the page's images have loaded, where document.ready() only fires after the DOM has loaded.

Answer 4

I was having this issue also and I traced it back to the CSS rule

img {
  max-width: 100%;
}

Once I removed the above rule (I didn't need it in this case) the images stopped disappearing.