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 fix by declaring width, height and background: none !important on the img's in question.

I thought it might be a png issue, but the same happens with jpgs:

http://www.lunatestsite.co.uk/test-disappearing-jpgs

Same result: often a flicker of the first of the two images in the slideshow, then disappears.

Any ideas at all appreciated.

SOLVED: My original fix worked for this in the end too : adding the background: none important!, and declaring the width / height. It didn't work on the additional templates because I was using a class instead of id for ul#product-images.

The shame, it burns! Sorry for wasting anyone's time.

body.home #front-slider #front-slides .slide{
background:none !important;
width: 980px;
height: 389px;
}

body.home #front-slider #front-slides .slide .slide-image img{
    background:none !important;
    width: 629px;
    height: 345px;
}

body.page-template-page-product-view-php ul#product-images .slide, body.page-template-page-product-view-wide-php ul#product-images .slide{
    background:none !important;
    width: 970px;
    height: 300px;
}

How does CSS3Pie help with this? Sorry, don't see the connection. — luke, Apr 17 '12 at 18:32

score 7 · Accepted Answer · answered Jul 10 '12 at 14:41

7

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.

answered Jul 10 '12 at 14:41

Astrotim

2,152
19
23

This worked for me. The max-width: 100% was coming from the [1140 grid](http://cssgrid.net/) so I didn't want to remove it beyond the slideshow. I was able to override it with .slide img { max-width: inherit } – Tom Wayson Sep 28 '12 at 05:16
Miraculously, this fixed the problem for me as well. It should be documented somewhere, since `max-width: 100%;` is a common trick to accommodate mobile browsers. – Blazemonger Nov 27 '12 at 20:39

score 2 · Answer 2 · answered Sep 16 '13 at 06:04

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/

score 1 · Answer 3 · answered Apr 17 '12 at 18:48

1

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.

answered Apr 17 '12 at 18:48

Sparky

98,165
25
199
285

IE is fussy as hell with `window.load` too. Are the images hidden (`display` or `visibility`) in any way before/during the DOM loads? – Sparky Apr 17 '12 at 19:01
The Cycle plugin just directly changes the opacity attribute of the images' parent
from 0 to 1, and sets display to either block or none dependent on if it's the current slide.

luke

Apr 17 '12 at 19:06

I've noticed IE8 will ignore the `window.load()` for images that are hidden or invisible. They still won't load until they are made visible again. Let me find my working workaround. – Sparky Apr 17 '12 at 19:10

@luke, sorry, my workaround won't work with Cycle since it's part of my own plugin. I recommend doing an image pre-load before Cycle is called. It's ugly but even IE8 will work with that. – Sparky Apr 17 '12 at 19:15

score 1 · Answer 4 · answered Feb 27 '13 at 08:53

1

Change

img {
    max-width: 100%;
}

to

img {
    max-width: auto;
}

answered Feb 27 '13 at 08:53

NicoJuicy

3,435
4
40
66

Disappearing images in IE8 jQuery Cycle

4 Answers4

Linked

Related