Rect height animation problem in FF and Edge

[Allgress 2 Likes (Newbie)]

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);

See the Pen aBGpjM by anon (@anon) on CodePen

[OSUblake 9,990 Likes (Superhero)]

And it works beautifully in Chrome, but in Firefox and Edge the height attribute isn't animating. 

 

Use the AttributePlugin. I don't think height is a valid CSS property for rects.

tl.to(bar, 1, { attr: { height: 300 }}, 0);

PS. Never trust Chrome for correct SVG behavior. Look at Firefox first... and dare I even say, maybe even Edge 

[Allgress 2 Likes (Newbie)]

You're my hero! Thanks so much!