title: CSS transitions in Edge and IE11 not working
body: <p>I don't often find myself with CSS issues, but this has me scratching my head.</p>
  <p>In this plunk <a href="http://plnkr.co/i2Fxol" rel="nofollow noreferrer">http://plnkr.co/i2Fxol</a>, everything works exactly as expected in all browsers, with the exception of IE10 and 11 and Edge completely failing to apply css transitions to <em>some</em> elements, not all. And no matter how much I look at it, I cannot see why it's failing in those particular places. (CSS added here but it needs to be seen in context as this is a really simplistic view)</p>
  <pre><code>#navigation ul {
    display: block;
    list-style: none;
    overflow: hidden;
    transition: all .2s ease;
  }
  </code></pre>
  <p>Essentially, they burp when the accordion is open and the menus are available to expand and contract in the 0.2 seconds stated. All the other transitions work.</p>
  <p><em>Oh, and there is now way that I am ever going to add  closures to svg paths within HTML5 just to remove those utterly pointless warnings in IE and Edge.</em></p>
  <h2>edit</h2>
  <p>The initial heights for the accordions are gathered on load with this:</p>
  <pre><code>...
  var initialHeights = document.getElementsByClassName(&quot;level-1&quot;);
  var values = [];
  for(var i = 0; initialHeights.length &gt; i; i++){
    values.push(initialHeights[i].offsetHeight);
  }
  ...
  </code></pre>
  <p>They are then zeroed inline with the values stored safely in an array using:</p>
  <pre><code>function toZero(){
    for(i = 0; mainSubMenus.length &gt; i; i++){
      mainSubMenus[i].setAttribute(&quot;style&quot;, &quot;height:0;&quot;);
    }
  }
  toZero();
  </code></pre>
  <p>This allows the use of css to transition between a zero height and a known value.</p>
  <h3>brainfart</h3>
  <p>I thought that maybe the following would cure the ill:</p>
  <pre><code>mainSubMenus[i].style.height = 0;
  </code></pre>
  <p>I was wrong.</p>