title: IE fade causing white spots on images
body: <p>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!</p>
  
  <p>Here is the preview site: <a href="http://www.preview.imageworkshop.com/portfolio/" rel="nofollow">http://www.preview.imageworkshop.com/portfolio/</a></p>
  
  <p><strong>THE PROBLEM</strong>
  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).</p>
  
  <p><strong>Note:</strong> I have implemented <a href="http://isotope.metafizzy.co/index.html" rel="nofollow">ISOTOPE</a>  for the filtering / layout on the website Portfolio.</p>
  
  <p>CSS3 transitions are defined in the CSS, however I believe that ISOTOPE is degrading back to using jquery for the animation effects.</p>
  
  <p>This is a photography website, so having good looking images is important.</p>
  
  <p><strong>Things I know already:</strong>
  - this is a known issue in IE6, 7 and 8, caused by fadein/fadeout and pixels getting left as transparent.</p>
  
  <ul>
  <li><p>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. <strong>We tried this, and it does not work for us</strong> - 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.</p></li>
  <li><p>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 (?).</p></li>
  </ul>
  
  <p><strong>So where to from here?</strong>
  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.</p>
  
  <p><strong>Ideally I need to fix the white spot issue.</strong> 
  - 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?</p>
  
  <p>Any help would be greatly appreciated. I have been tearing my hair out all weekend trying to get this to work, with no success. </p>
  
  <p><strong>UPDATE: 8/9/2011</strong>
  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. </p>