Fix responsive issue when the chart is recreated (chartjs#4774)

Chrome specific issue that happens when destroying a chart and re-creating it immediately (same animation frame?). The CSS animation used to detect when the canvas become visible is not re-evaluated, breaking responsiveness. Accessing the `offsetParent` property will force a reflow and re-evaluate the CSS animation.

src/platforms/platform.dom.js

@@ -236,6 +236,13 @@ function watchForRender(node, handler) {
 		addEventListener(node, type, proxy);
 	});
 
+	// #4737: Chrome might skip the CSS animation when the CSS_RENDER_MONITOR class
+	// is removed then added back immediately (same animation frame?). Accessing the
+	// `offsetParent` property will force a reflow and re-evaluate the CSS animation.
+	// https://gist.github.com/paulirish/5d52fb081b3570c81e3a#box-metrics
+	// https://github.com/chartjs/Chart.js/issues/4737
+	expando.reflow = !!node.offsetParent;
+
 	node.classList.add(CSS_RENDER_MONITOR);
 }
 

test/jasmine.utils.js

@@ -75,7 +75,13 @@ function acquireChart(config, options) {
 	wrapper.appendChild(canvas);
 	window.document.body.appendChild(wrapper);
 
-	chart = new Chart(canvas.getContext('2d'), config);
+	try {
+		chart = new Chart(canvas.getContext('2d'), config);
+	} catch (e) {
+		window.document.body.removeChild(wrapper);
+		throw e;
+	}
+
 	chart.$test = {
 		persistent: options.persistent,
 		wrapper: wrapper

test/specs/core.controller.tests.js

@@ -495,6 +495,45 @@ describe('Chart', function() {
 				});
 			});
 		});
+
+		// https://github.com/chartjs/Chart.js/issues/4737
+		it('should resize the canvas when re-creating the chart', function(done) {
+			var chart = acquireChart({
+				options: {
+					responsive: true
+				}
+			}, {
+				wrapper: {
+					style: 'width: 320px'
+				}
+			});
+
+			waitForResize(chart, function() {
+				var canvas = chart.canvas;
+				expect(chart).toBeChartOfSize({
+					dw: 320, dh: 320,
+					rw: 320, rh: 320,
+				});
+
+				chart.destroy();
+				chart = new Chart(canvas, {
+					type: 'line',
+					options: {
+						responsive: true
+					}
+				});
+
+				canvas.parentNode.style.width = '455px';
+				waitForResize(chart, function() {
+					expect(chart).toBeChartOfSize({
+						dw: 455, dh: 455,
+						rw: 455, rh: 455,
+					});
+
+					done();
+				});
+			});
+		});
 	});
 
 	describe('config.options.responsive: true (maintainAspectRatio: true)', function() {
@@ -627,7 +666,7 @@ describe('Chart', function() {
 		});
 	});
 
-	describe('config.options.devicePixelRatio 3', function() {
+	describe('config.options.devicePixelRatio', function() {
 		beforeEach(function() {
 			this.devicePixelRatio = window.devicePixelRatio;
 			window.devicePixelRatio = 1;