Data-attributes not working in IE

Question

I'm trying to create an animated bar graph in Javascript/CSS.

It is working perfectly on Chrome, Firefox, Safari, and on mobile devices. However, it doesn't work in any version of IE (including IE11, which is really strange).

I've tried giving each bar a specific ID and targeting that with .getElementById and .getAttribute, but that didn't work.

From Googling, data-attributes, .css(), and .animate() should work in IE11. All questions about bugs seem to be for older versions.

I'd really appreciate an extra set of eyes.

Thank you,

Fiddle is attached: http://jsfiddle.net/828s8Lvx/

Also my code is below:

HTML:

<div id="platform-chart">
    <ul class="bars">
      <li><div data-percentage="1.6" class="bar"></div><span>1</span></li>
      <li><div data-percentage="1.3" class="bar"></div><span>2</span></li>
      <li><div data-percentage="0.8" class="bar"></div><span>3</span></li>
      <li><div data-percentage="5.2" class="bar"></div><span>4</span></li>
      <li><div data-percentage="9.4" class="bar"></div><span>5</span></li>
      <li><div data-percentage="17.0" class="bar"></div><span>6</span></li>
      <li><div data-percentage="14.9" class="bar"></div><span>7</span></li>
      <li><div data-percentage="14.4" class="bar"></div><span>8</span></li>
      <li><div data-percentage="13.6" class="bar"></div><span>9</span></li>
      <li><div data-percentage="13.6" class="bar"></div><span>10</span></li>
      <li><div data-percentage="6.5" class="bar"></div><span>11</span></li>
      <li><div data-percentage="1.3" class="bar"></div><span>12</span></li>
      <li><div data-percentage="0.3" class="bar"></div><span>13</span></li>
    </ul>
  </div>

Javascript:

      $(".bars li div").each( function( key, bar ) {
        var self = this;
        setTimeout (function() {
          $(self).css({ 'opacity' : 1 });
          var percentage = ($(self).attr('data-percentage') * 3.8);
          $(self).animate({ 'height' : percentage + '%' }, 1500);
        }, key * 300);
      });

SASS:

#platform-chart {
position: relative;
left: 50%;

.bars {
  display: inline-block;
  height: 300px;
  width: 950px;

  li {
    display: table-cell;
    width: 100px;
    height: 300px;
    text-align: center;
    position: relative;

    .bar {
      position: absolute;
      bottom: 0;
      display: block;
      background: #f4804b; 
      width: 50px;
      margin-left: 20px;

      &:after {
        position: relative;
        bottom: 20px;
        color: #f4804b;
        content: attr(data-percentage) '%';
      }
    }

    span {
      position: absolute;
      color: #000;
      width: 100%;
      bottom: -2em; 
      left: 7px;
    }
  }
} 

Answer 1

IE cannot calculae percentage height of a parent element that is displayed as a table-cell. Switching this to inline-block will partially solve it. Then add this (albeit a bit hacky) javascript to emulate the behavior of table-cell to fit them all in the div

var totalItems = $(".bars li").length;
$(".bars li").width((100/totalItems)+'%');