CSS transitions in Edge and IE11 not working
<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>