From 50615557d9601251b73e69e393f22115bd75e925 Mon Sep 17 00:00:00 2001
From: Andreas Hocevar <andreas.hocevar@gmail.com>
Date: Wed, 10 May 2017 11:43:21 +0200
Subject: [PATCH] Create intermediate canvas when resolutions have changed

---
 src/ol/renderer/canvas/tilelayer.js               | 15 +++++++++------
 test/spec/ol/renderer/canvas/tilelayer.test.js    |  2 ++
 .../ol/renderer/canvas/vectortilelayer.test.js    |  3 +++
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/ol/renderer/canvas/tilelayer.js b/src/ol/renderer/canvas/tilelayer.js
index 99dbd59469..651e609a28 100644
--- a/src/ol/renderer/canvas/tilelayer.js
+++ b/src/ol/renderer/canvas/tilelayer.js
@@ -170,13 +170,16 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(frameState, layer
     }
   }
 
+  var renderedResolution = tileResolution * pixelRatio / tilePixelRatio * oversampling;
   var hints = frameState.viewHints;
-  if (!(this.renderedResolution && Date.now() - frameState.time > 16 &&
-      (hints[ol.ViewHint.ANIMATING] || hints[ol.ViewHint.INTERACTING])) &&
-      (newTiles || !(this.renderedExtent_ &&
-      ol.extent.containsExtent(this.renderedExtent_, extent)) ||
-      this.renderedRevision != sourceRevision) ||
-      oversampling != this.oversampling_) {
+  var animatingOrInteracting = hints[ol.ViewHint.ANIMATING] || hints[ol.ViewHint.INTERACTING];
+  if (!(Date.now() - frameState.time > 16 && animatingOrInteracting) && (
+        newTiles ||
+        !(this.renderedExtent_ && ol.extent.containsExtent(this.renderedExtent_, extent)) ||
+        this.renderedRevision != sourceRevision ||
+        oversampling != this.oversampling_ ||
+        !animatingOrInteracting && renderedResolution != this.renderedResolution
+      )) {
 
     var context = this.context;
     if (context) {
diff --git a/test/spec/ol/renderer/canvas/tilelayer.test.js b/test/spec/ol/renderer/canvas/tilelayer.test.js
index a9238e15fc..aa695b9546 100644
--- a/test/spec/ol/renderer/canvas/tilelayer.test.js
+++ b/test/spec/ol/renderer/canvas/tilelayer.test.js
@@ -79,6 +79,8 @@ describe('ol.renderer.canvas.TileLayer', function() {
       var renderer = new ol.renderer.canvas.TileLayer(layer);
       renderer.renderedTiles = [];
       var frameState = {
+        viewHints: [],
+        time: Date.now(),
         viewState: {
           center: [10, 5],
           projection: ol.proj.get('EPSG:3857'),
diff --git a/test/spec/ol/renderer/canvas/vectortilelayer.test.js b/test/spec/ol/renderer/canvas/vectortilelayer.test.js
index e0bcc638a1..fb5faa7e77 100644
--- a/test/spec/ol/renderer/canvas/vectortilelayer.test.js
+++ b/test/spec/ol/renderer/canvas/vectortilelayer.test.js
@@ -170,6 +170,9 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
       var proj = ol.proj.get('EPSG:3857');
       var frameState = {
         extent: proj.getExtent(),
+        pixelRatio: 1,
+        time: Date.now(),
+        viewHints: [],
         viewState: {
           center: [0, 0],
           resolution: 156543.03392804097,