Make charts vertically responsive (#3105) (#3326)

Ensure that the hidden iframe is stretched vertically in order to detect height changes. Remove the classlist check/call since it was incorrectly spelled (should be classList), but also useless since the iframe has just been generated. Also remove the callback check: addResizeListener should never be called w/o a valid callback.

diff --git a/src/core/core.helpers.js b/src/core/core.helpers.js
index 5364d191f8efafcfa21d1746f9619ee27ebe5163..8609acdd09d0b9107c5bd3b83e3d3d0029851c40 100644 (file)
--- a/src/core/core.helpers.js
+++ b/src/core/core.helpers.js
@@ -958,38 +958,32 @@ module.exports = function(Chart) {
        };
        helpers.addResizeListener = function(node, callback) {
                // Hide an iframe before the node
-               var hiddenIframe = document.createElement('iframe');
-               var hiddenIframeClass = 'chartjs-hidden-iframe';
-
-               if (hiddenIframe.classlist) {
-                       // can use classlist
-                       hiddenIframe.classlist.add(hiddenIframeClass);
-               } else {
-                       hiddenIframe.setAttribute('class', hiddenIframeClass);
-               }
-
-               // Set the style
-               hiddenIframe.tabIndex = -1;
-               var style = hiddenIframe.style;
-               style.width = '100%';
-               style.display = 'block';
-               style.border = 0;
-               style.height = 0;
-               style.margin = 0;
-               style.position = 'absolute';
-               style.left = 0;
-               style.right = 0;
-               style.top = 0;
-               style.bottom = 0;
+               var iframe = document.createElement('iframe');
+
+               iframe.className = 'chartjs-hidden-iframe';
+               iframe.style.cssText =
+                       'display:block;'+
+                       'overflow:hidden;'+
+                       'border:0;'+
+                       'margin:0;'+
+                       'top:0;'+
+                       'left:0;'+
+                       'bottom:0;'+
+                       'right:0;'+
+                       'height:100%;'+
+                       'width:100%;'+
+                       'position:absolute;'+
+                       'pointer-events:none;'+
+                       'z-index:-1;';
+
+               // Prevent the iframe to gain focus on tab.
+               // https://github.com/chartjs/Chart.js/issues/3090
+               iframe.tabIndex = -1;
 
                // Insert the iframe so that contentWindow is available
-               node.insertBefore(hiddenIframe, node.firstChild);
+               node.insertBefore(iframe, node.firstChild);
 
-               (hiddenIframe.contentWindow || hiddenIframe).onresize = function() {
-                       if (callback) {
-                               return callback();
-                       }
-               };
+               this.addEvent(iframe.contentWindow || iframe, 'resize', callback);
        };
        helpers.removeResizeListener = function(node) {
                var hiddenIframe = node.querySelector('.chartjs-hidden-iframe');