Dojo charts in tabs not working in Firefox

I am using two identical scripts inside two tabs in order to create a dojo chart in each one: tabs page.

If you open the page with Google Chrome, Safari both tabs render the charts.

If you open it with Firefox the second tab does NOT render it's chart. If you open it with Explorer 11 the second tab renders it's chart in random sizes.

Can somebody tell me why I am getting this error in the second tab?

All my browsers are updated to their latest versions.

The script uses the latest versions of dojo, jquery:

<!DOCTYPE html>
<html>
<head>

  <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/themes/calcite/dijit/calcite.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/dojo/1.13.0/dojo/dojo.js"></script>

  <script>
    require([
             "dojox/charting/Chart",
             "dojox/charting/Chart2D", 
             "dojox/charting/action2d/MoveSlice" , 
             "dojox/charting/action2d/Tooltip",
             "dojo/ready"], 
            function(Chart, Chart2D, MoveSlice, Tooltip, ready){

ready(function(){

var chart1 = new Chart("He1");

                chart1.addPlot("default", {
                    type: "Pie"
                });
                chart1.addSeries("He1", [
                    {y: 1, text: 1},
                    {y: 1, text: 2}

                ]);
                new Tooltip(chart1, "default");
                new MoveSlice(chart1, "default");

chart1.render();

});

    });

    </script>

</head>
<body class="calcite">
<div>
    <div id="He1" style="width: 140px; height: 140px; "></div>
</div>

</body>
</html>

Solution

To make multiple charts in accordion create appropriate layout and then initialize charts and accordion container wrapping them.

For example you can modify your layout to

<body class="calcite">
  <div id="accordion" style="height: 280px">
    <div id="pane1">
      <div id="He1" style="width: 140px; height: 140px; "></div>
    </div>
    <div id="pane2">
      <div id="He2" style="width: 140px; height: 140px; "></div>
    </div>
  </div>
</body>

Then create you He1 and He2 charts as before, and finally initialize accordion and panels like this:

var acc = new AccordionContainer({}, "accordion");
acc.addChild(new ContentPane({
  title: "Chart one",
}, "pane1"));
acc.addChild(new ContentPane({
  title: "Chart two",
}, "pane2"));
acc.startup();

See working example here: https://jsfiddle.net/1k6w8otn/4

Note that it does not require any iframe. I strongly advocate for pure programming, using any builders (as you mentioned in comments) will usually lead to spaghetti code and many times you get yourself unable to fix it. Dojo toolkit is also far from best choice, it is niche library these days (no up to date books, virtually no community behind etc) and if you are not forced to use it, do some research and look for better JS library.