Isotope v.1 - display bug with Internet Explorer 11 on win 8.1

[lupik]

Hi,
please help.
http://portfolio.pisarek.net/
Some images displayed partially, after refreshing - gradually - ie shows more:

Many thanks in advance
Łukasz Pisarek

[desandro]

Are you using imagesLoaded?

[lupik]

Yes. Below script (sorry - I can't edit it here):

$(document).ready(function(){

var $container = $('#container');
// init Isotope
$container.imagesLoaded( function() {
$container.isotope({
masonry: {
columnWidth: 250
}
});
});

var $optionSets = $('#options .option-set'),
$optionLinks = $optionSets.find('a');

$optionLinks.click(function(){
  var $this = $(this);
  // don't proceed if already selected
  if ( $this.hasClass('selected') ) {
    return false;
  }
  var $optionSet = $this.parents('.option-set');
  $optionSet.find('.selected').removeClass('selected');
  $this.addClass('selected');

  // make option object dynamically, i.e. { filter: '.my-filter-class' }
  var options = {},
      key = $optionSet.attr('data-option-key'),
      value = $this.attr('data-option-value');
  // parse 'false' as false boolean
  value = value === 'false' ? false : value;
  options[ key ] = value;
  // otherwise, apply new options
  $container.isotope( options );
  return false;
});

});
//solution for IE added by nhunzaker
var loadFaultTolerantImage = function(src) {
var attempts = 0;
var $image = $("", {
alt: "",

    // Important to help IE reset image width/height after a
    // failed load. This prevents a cache-busted image from
    // having a width and height of 28x30
    css: {
        height: "auto",
        width: "auto"
    }
});
var image = $image.get(0);

image.onerror = function() {
    // To prevent infinite loops, stop trying after
    // three attempts
    if (attempts++ < 2) {
       this.src = src + "#ie-cache-bust";
    }
};

image.src = src;

return $image;

};

[desandro]

I'm sorry to see you're having trouble with Isotope. Could you provide a reduced test case? See Submitting Issues in the contributing guidelines.

[lupik]

I prepared one, though don't know it is proper. Let me know is it enough for you?
http://test.pisarek.net/
u:test
p:isotope

[desandro]

Thanks for that! It looks like your code is okay, and I don't see any errors. I see you're using Isotope v1, and with it, imagesLoaded v1. I would recommend upgrading to Isotope v2 and imagesLoaded v3.

[lupik]

Thank you. I try with upgrade.
However, occasionally the bug appears on the test site, but not every time.
Sometimes you can see crossed circle, usually displayed when there is no picture, or you can see partially destroyed image. It happens both to metro and to desktop version.
But i know such situations, that when doctor is near, everything recovers ;)

[lupik]

I upgraded to v2, it seems to work excellent. No bug with IE 11. Sorting is very very fast now, so I had to increase duration.
Thank you very much :)

[desandro]

That's great to hear! Thanks for following up. I'm closing this issue as fixed 🍒