I'm writing the code to draw bar charts and am using timelinemax to animate the initial transition of the bars from 0 to their height. And it works beautifully in Chrome, but in Firefox and Edge the height attribute isn't animating. Nothing displays at all in IE, but that seems to be a separate problem.
I'm having a hard time recreating the exact problem in the code pen, but the pen doesn't animate the height in chrome and doesn't show anything in ff and edge, which is similar.
Here is what the actual code looks like.
var tl = new TimelineMax();
var delay = 1 / barData.Segments.length;
for (var i = 0; i < barData.Segments.length; ++i) {
var segPercent = barData.Segments.Count / maxValue;
var segHeight = axisHeight * segPercent;
var y = startY - segHeight - prevHeight - 1; // - 1 so that bar doesn't overlap axis
var segColor = barData.Segments.Color;
var bar = document.createElementNS("http://www.w3.org/2000/svg", "rect");
bar.setAttribute("class", "bar-chart-segment");
bar.setAttribute("x", x + (barWidth / 10)); //
bar.setAttribute("y", startY - prevHeight - 1); // magic numbers in these lines are for padding
bar.setAttribute("width", barWidth - (barWidth / 10)); //
bar.setAttribute("height", 0);
bar.setAttribute("fill", rgbToHex(segColor.R, segColor.G, segColor.B ));
bar.setAttribute("onclick", "showSVGChartDrilldown('" + uoKey + "', '" + barData.DrillDownArgs + "')");
group.appendChild(bar);
tl.to(bar, delay,{ y: -segHeight, ease: Power0.easeNone }, i * delay);
tl.to(bar, delay, { height: segHeight, ease: Power0.easeNone }, i * delay);