Prevent infinite resize when vertical scrollbar appears (#6011)

If the container size shrank during chart resize, let's assume scrollbar appeared. So we resize again with the scrollbar visible effectively making chart smaller and the scrollbar hidden again. Because we are inside `throttled`, and currently `ticking`, scroll events are ignored during this whole 2 resize process. If we assumed wrong and something else happened, we are resizing twice in a frame (potential performance issue)

diff --git a/src/core/core.controller.js b/src/core/core.controller.js
index 1d85ff1ba8ea51bbbf9a2590c18bf3c1698a1340..a294b160031610632e473c1beba1b7cf8dd5e77a 100644 (file)
--- a/src/core/core.controller.js
+++ b/src/core/core.controller.js
@@ -277,13 +277,13 @@ helpers.extend(Chart.prototype, /** @lends Chart */ {
                        plugins.notify(me, 'resize', [newSize]);
 
                        // Notify of resize
-                       if (me.options.onResize) {
-                               me.options.onResize(me, newSize);
+                       if (options.onResize) {
+                               options.onResize(me, newSize);
                        }
 
                        me.stop();
                        me.update({
-                               duration: me.options.responsiveAnimationDuration
+                               duration: options.responsiveAnimationDuration
                        });
                }
        },

diff --git a/src/platforms/platform.dom.js b/src/platforms/platform.dom.js
index c05152534207bb34c2ed3aa491544f4f9341bc58..01a46174d7f985514fc3791128c6c36615404dd4 100644 (file)
--- a/src/platforms/platform.dom.js
+++ b/src/platforms/platform.dom.js
@@ -273,7 +273,19 @@ function addResizeListener(node, listener, chart) {
        // Let's keep track of this added resizer and thus avoid DOM query when removing it.
        var resizer = expando.resizer = createResizer(throttled(function() {
                if (expando.resizer) {
-                       return listener(createEvent('resize', chart));
+                       var container = chart.options.maintainAspectRatio && node.parentNode;
+                       var w = container ? container.clientWidth : 0;
+                       listener(createEvent('resize', chart));
+                       if (container && container.clientWidth < w && chart.canvas) {
+                               // If the container size shrank during chart resize, let's assume
+                               // scrollbar appeared. So we resize again with the scrollbar visible -
+                               // effectively making chart smaller and the scrollbar hidden again.
+                               // Because we are inside `throttled`, and currently `ticking`, scroll
+                               // events are ignored during this whole 2 resize process.
+                               // If we assumed wrong and something else happened, we are resizing
+                               // twice in a frame (potential performance issue)
+                               listener(createEvent('resize', chart));
+                       }
                }
        }));