Workaround for IE11 SVG Image Corruption

Including all SVGs upfront and removing them after about 1000ms prevents the problem from occuring. Note: This workaround only works if all of the upfront-included cards either stay in the DOM or are removed after about 1000ms. In our tests, removing the upfront-included cards after a much shorter period than 1000ms didn’t prevent the SVGs from getting corrupted sometimes.

Go back to the problem description.

The following code is used to prevent the images from getting into a broken state:

  var colors = "E,G,H,S".split(',');
  var cards = "7,8,9,U,O,K,X,A".split(',');

  for (var i = 0; i <= colors.length - 1; i++) {
    for (var j = 0; j <= cards.length - 1; j++) {
      var $card = $("<div class='card_" + (colors[i] + cards[j]) + "' style='display:none; width:0px; height:0px;'>");
      $("#initial_cards").append($card);
    }
  }
  setTimeout(function() {
    $("#initial_cards").remove();
  }, 1000);