Fix chart resizing issue (#7297) (#7298)

Fix chart resizing issue

diff --git a/src/platform/platform.dom.js b/src/platform/platform.dom.js
index de0935a4d671e09d58127991ec91804126a48375..e994e6d6dc5a662ed7677b4e5f171a1a8b65eb7e 100644 (file)
--- a/src/platform/platform.dom.js
+++ b/src/platform/platform.dom.js
@@ -236,7 +236,15 @@ function createResizeObserver(chart, type, listener) {
        // @ts-ignore until https://github.com/microsoft/TypeScript/issues/37861 implemented
        const observer = new ResizeObserver(entries => {
                const entry = entries[0];
-               resize(entry.contentRect.width, entry.contentRect.height);
+               const width = entry.contentRect.width;
+               const height = entry.contentRect.height;
+               // When its container's display is set to 'none' the callback will be called with a
+               // size of (0, 0), which will cause the chart to lost its original height, so skip
+               // resizing in such case.
+               if (width === 0 && height === 0) {
+                       return;
+               }
+               resize(width, height);
        });
        observer.observe(container);
        return observer;

diff --git a/test/specs/core.controller.tests.js b/test/specs/core.controller.tests.js
index 2af65e540152d10c5203777e6e6d0cc8963aa76b..3251be75d06a319ec334d3edc4db35b67d7a4109 100644 (file)
--- a/test/specs/core.controller.tests.js
+++ b/test/specs/core.controller.tests.js
@@ -365,6 +365,59 @@ describe('Chart', function() {
                        wrapper.style.width = '455px';
                });
 
+               it('should restore the original size when parent became invisible', function(done) {
+                       var chart = acquireChart({
+                               options: {
+                                       responsive: true,
+                                       maintainAspectRatio: false
+                               }
+                       }, {
+                               canvas: {
+                                       style: ''
+                               },
+                               wrapper: {
+                                       style: 'width: 300px; height: 350px; position: relative'
+                               }
+                       });
+
+                       waitForResize(chart, function() {
+                               expect(chart).toBeChartOfSize({
+                                       dw: 300, dh: 350,
+                                       rw: 300, rh: 350,
+                               });
+
+                               var original = chart.resize;
+                               chart.resize = function() {
+                                       fail('resize should not have been called');
+                               };
+
+                               var wrapper = chart.canvas.parentNode;
+                               wrapper.style.display = 'none';
+
+                               setTimeout(function() {
+                                       expect(wrapper.clientWidth).toEqual(0);
+                                       expect(wrapper.clientHeight).toEqual(0);
+
+                                       expect(chart).toBeChartOfSize({
+                                               dw: 300, dh: 350,
+                                               rw: 300, rh: 350,
+                                       });
+
+                                       chart.resize = original;
+
+                                       waitForResize(chart, function() {
+                                               expect(chart).toBeChartOfSize({
+                                                       dw: 300, dh: 350,
+                                                       rw: 300, rh: 350,
+                                               });
+
+                                               done();
+                                       });
+                                       wrapper.style.display = 'block';
+                               }, 200);
+                       });
+               });
+
                it('should resize the canvas when parent is RTL and width changes', function(done) {
                        var chart = acquireChart({
                                options: {