IE fade causing white spots on images

Question

I am really stuck on this one. Website is almost finished. Just trying to iron out the last few bugs with IE - what a surprise!

Here is the preview site: http://www.preview.imageworkshop.com/portfolio/

THE PROBLEM if you view the portfolio page in IE, and use the filters swapping back and forwards between options, after a little while the images start to get covered in white dots (particularily in dark areas).

Note: I have implemented ISOTOPE for the filtering / layout on the website Portfolio.

CSS3 transitions are defined in the CSS, however I believe that ISOTOPE is degrading back to using jquery for the animation effects.

This is a photography website, so having good looking images is important.

Things I know already: - this is a known issue in IE6, 7 and 8, caused by fadein/fadeout and pixels getting left as transparent.

• people claim you can fix this by moving the black point of the image, as supposidly it is only 'true black' pixels that have the problem. We tried this, and it does not work for us - and we also don't want to make these changes becuase colour accuracy is important for the images, and shifting the black point starts messing with the image. In the portfolio the 3 big images at the bottom have had their black points shifted and they still get white dots.

• apparently, setting the background colour of the parent div box to black will also solve the problem. this seemed to work for me if I set the background of .photos to black (but this makes half the screen black as well. But setting the background of the DIV which contains the picture (.photo) did not help. If there is a way that we can get this to work, this would be a suitable solution. I can't get it to work for me (?).

So where to from here? I can turn off the transitions/fadein etc in ISOTOPE by setting animationEngine : 'CSS'. This effectivley means that if the browser supports CSS3 then the CSS will be used for the transitions, but if not, the browser will not revert to using javascript to do the transitions. However, this means that there is no transition on the page on IE, which looks pants.

Ideally I need to fix the white spot issue. - any suggestions on how i might be able to get ISOTOPE to refresh the images after a filter? - maybe there is another way I can do the transitions? - is it possible to remove the fadein/fadeout, but still use a transform of some sort so that I still have some animation happening in IE?

Any help would be greatly appreciated. I have been tearing my hair out all weekend trying to get this to work, with no success.

UPDATE: 8/9/2011 I managed to find a way to turn off the fade transition, however, the javascript filter that I am using still sets the opacity to 0 to hide the image, and this is actually causing the white spot issue to occour. So I really need to find a way to get the background colour to be set to black so that it hides the transparent pixels.

Answer 1

I had the exact same problem as the original poster. To get rid of the white pixels/dots, I set the background color of the div containing my images to #000 and this fixed the problem.

Hope this helps all those frustrated developers out there who want to utterly destroy IE as badly as I do.

Answer 2

ok, so I managed to fix this issue. Below are details on the generic fix (the reason why it works), and then under that the specifics of how I applied this fix - which are unique to the jquery ISOTOPE plugin I am using.

Note that the preview site from the original post is no longer active, but the live website can now be viewed here: http://www.imageworkshop.com/portfolio/

THE GENERIC FIX

the problem is caused by hiding an image in IE using opacity:0; (not necessarily specific to fading in IE as most other threads suggest. I removed the opacity fade, but still had the same issue becuase opacity:0; was used to hide the filtered images.

the answer is to use display:none; to hide the images for IE.

MY SPECIFIC IMPLEMENTATION OF THE FIX

Used boiler plate to identify old / problematic browsers, by using this code in the header.php file of my wordpress theme - this adds a class ".oldie" when an old browser is identified:

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

CSS to use display:none;, instead of opactiy:0 for ISOTOPE (note this is specific to the ISOTOPE plugin that I am using to hide/filter images.

 .oldie .isotope-hidden { display: none; }

In the ISOTOPE javascript, at the top identify if oldie exists:

 isOldie = $('html').hasClass('oldie');

Then tell isotope which sytle to use:

hiddenStyle: isOldie ? {} : $.Isotope.settings.hiddenStyle,
visibleStyle: isOldie ? {} : $.Isotope.settings.visibleStyle

here is a sample site which shows this in operation: http://support.metafizzy.co/2011/09-12-ie-trans.html

and the javascript declaration for ISOTOPE from that page (note that this is simpler than what i have used on my website)

 <script>
 $(function(){
    var $container = $('#container'),
    $photos = $container.find('.photo'),
    isOldie = $('html').hasClass('oldie');

    $container.imagesLoaded( function(){
       $container.isotope({
       itemSelector : '.photo',
       masonry: {
       columnWidth: 200
       },
       hiddenStyle: isOldie ? {} : $.Isotope.settings.hiddenStyle,
       visibleStyle: isOldie ? {} : $.Isotope.settings.visibleStyle
    });
 });
    $('#filters a').click(function(){
      $container.isotope({ filter: $(this).attr('data-filter') });
      return false;
    });
 });
 </script>