Chart will still trigger reflow after destoryed when window resize in internet explorer 8 #6746

Pennnn · 2017-05-19T07:25:32Z

Expected behaviour

In IE8, it should not trigger the reflow event when the chart has been destroyed.

Actual behaviour

In IE8, after the chart has been destroyed, but the event attach to window hasn't been correctly removed;
so it still invoke the reflow when window is resizing.

Live demo with steps to reproduce

Affected browser(s)

Internet explorer 8

KacperMadej · 2017-05-22T11:07:13Z

Hi Pennnn,

Thank you for reporting about the problem. However, I am unable to recreate the issue. Here's the code I used:

<html> 
  <head> 
    <meta http-equiv="X-UA-Compatible" content="IE=8" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> 
    </script>
    <script src="http://code.highcharts.com/highcharts.src.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.src.js"></script>
  </head> 
  <body>
    <button id="button">Destroy the chart</button>
    <div id="container" style="height: 400px; margin: 0 auto;"></div>
    <script>
      Highcharts.chart('container', {
        series: [{
          data: [1,2,3]
        }]
      }, function (chart) {
        // the button handler
        $('#button').click(function() {
          chart.destroy();
          $(this).attr('disabled', true);
        });
      });
    </script>
  </body> 
</html>

Steps:

Press the button
Resize window

All is fine, no error.

@Pennnn Please provide a demo that will show the problem or a way to recreate, test and debug the issue.

sebastianbochan · 2017-05-23T08:51:11Z

@Pennnn please supply us a full number of IE8 version.

Pennnn · 2017-05-23T11:48:53Z

<html> 
  <head> 
     <meta http-equiv="X-UA-Compatible" content="IE=8" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> 
    </script>
    <script src="http://code.highcharts.com/highcharts.src.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.src.js"></script>
  </head> 
  <body>
    <button id="button">Destroy the chart</button>
    <button id="createBtn">create the chart</button>
    <div id="container1" style="height: 400px; margin: 0 auto;"></div>
    <div id="container2" style="height: 400px; margin: 0 auto;"></div>
    <div id="container3" style="height: 400px; margin: 0 auto;"></div>
    <script>
    $(function() {
      var charts = [];
      var createChart = function(id) {
        return new Highcharts.Chart({
            chart : {
              defaultSeriesType : 'pie',
              renderTo: id,
            },
            series: [{
              data: [1,2,3]
            }]
          });
      };
      var createMutipleCharts = function() {
        $.each([1, 2, 3], function(index, item){
          charts.push(createChart('container' + item));
        });
      }

      $('#createBtn').click(createMutipleCharts);
      $('#button').click(function() {
          var c;
          while(c = charts.pop()) {
            c.destroy();
          }
      });
    
      createMutipleCharts();
    });
    </script>
  </body> 
</html>

@KacperMadej thanks for your reply.
I found that this will only occurs when there are mutiple charts.
you can reproduce by step below.
Steps:

Press the button 'Destroy the chart'
resize window
then it will throw error: 'options.chart' cannot be undefined in line 16047
But this plays well in chrome.

Pennnn · 2017-05-23T11:50:42Z

@sebastianbochan the version is 8.0.7601.17514

Pennnn · 2017-05-23T13:40:12Z

 H.addEvent = function(el, type, fn) {
    
    var events = el.hcEvents = el.hcEvents || {};
    
    function wrappedFn(e) {
        e.target = e.srcElement || win; // #2820
        fn.call(el, e);
    }
    
    // Handle DOM events in modern browsers
    if (el.addEventListener) {
        el.addEventListener(type, fn, false);
        
        // Handle old IE implementation
    } else if (el.attachEvent) {
        
        if (!el.hcEventsIE) {
            el.hcEventsIE = {};
        }

        // Link wrapped fn with original fn, so we can get this in removeEvent
        el.hcEventsIE[fn.toString()] = wrappedFn;

        el.attachEvent('on' + type, wrappedFn);
    }
    
    if (!events[type]) {
        events[type] = [];
    }
    
    events[type].push(fn);
    
    // Return a function that can be called to remove this event.
    return function() {
        H.removeEvent(el, type, fn);
    };
};

I think el.hcEventsIE[fn.toString()] = wrappedFn; cause this problem.
When you create mutiple charts, it will overide the previous one because fn.toString()is the same.
So the 'resize' event cannot be correctly removed except the final one;

KacperMadej · 2017-05-23T15:11:41Z

@Pennnn Thank you very much for the debugging and help. I was also able to check that only one event is being removed, so in case of 3 charts - 2 events are not removed and are causing errors.

The problem seems to be as you have explained.

fredure · 2019-08-06T10:16:53Z

@KacperMadej @TorsteinHonsi
Hello, this error is repeated if there are 4 diagrams on the page in IE11.
Will this commit fix the bug?
073df36

pawelfus · 2019-08-06T12:10:19Z

It seems that IE11 was just updated (?) and broke something - just today, you are the third user reporting this issue, see #11609 - @KacperMadej is investigating the issue, will update #11609 ticket once he's ready. Please follow #11609

Edit:
Wrong ticket number, should be #11609 - updated.

KacperMadej added Status: Can't reproduce Status: Pending reply labels May 22, 2017

KacperMadej added Type: Bug and removed Status: Can't reproduce Status: Pending reply labels May 23, 2017

KacperMadej self-assigned this May 24, 2017

KacperMadej added a commit that referenced this issue May 25, 2017

Fixed #6746, events for old IE (6-8) didn't have unique keys.

52b83e6

KacperMadej added a commit that referenced this issue Jun 8, 2017

Reverting the commit for #6746 to make improvements.

c51f5cc

KacperMadej added a commit that referenced this issue Jun 8, 2017

Fixed #6746, events for old IE (6-8) didn't have unique keys.

3263423

KacperMadej added a commit that referenced this issue Jun 23, 2017

Reverted commit for #6746 to make improvements.

c0a6a9e

KacperMadej added a commit that referenced this issue Jun 23, 2017

Fixed #6746, events for legacy IE (6-8) didn't have unique keys.

7127b7b

TorsteinHonsi closed this in 073df36 Jun 26, 2017

highcharts / highcharts

Chart will still trigger reflow after destoryed when window resize in internet explorer 8 #6746

Chart will still trigger reflow after destoryed when window resize in internet explorer 8 #6746

Pennnn commented May 19, 2017 •

edited

KacperMadej commented May 22, 2017

sebastianbochan commented May 23, 2017

Pennnn commented May 23, 2017 •

edited

Pennnn commented May 23, 2017

Pennnn commented May 23, 2017

KacperMadej commented May 23, 2017

fredure commented Aug 6, 2019 •

edited

pawelfus commented Aug 6, 2019 •

edited

highcharts / highcharts

Chart will still trigger reflow after destoryed when window resize in internet explorer 8 #6746

Chart will still trigger reflow after destoryed when window resize in internet explorer 8 #6746

Comments

Pennnn commented May 19, 2017 • edited

Expected behaviour

Actual behaviour

Live demo with steps to reproduce

Affected browser(s)

KacperMadej commented May 22, 2017

sebastianbochan commented May 23, 2017

Pennnn commented May 23, 2017 • edited

Pennnn commented May 23, 2017

Pennnn commented May 23, 2017

KacperMadej commented May 23, 2017

fredure commented Aug 6, 2019 • edited

pawelfus commented Aug 6, 2019 • edited

Pennnn commented May 19, 2017 •

edited

Pennnn commented May 23, 2017 •

edited

fredure commented Aug 6, 2019 •

edited

pawelfus commented Aug 6, 2019 •

edited