From bf0671fc08933b8d8d08b0cf75134791d6eb16df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= <maximilian.kroeg@geocept.com>
Date: Mon, 17 May 2021 14:19:37 +0200
Subject: [PATCH] Fix layer canvas reuse

If the scale values have more than 6 decimals they are rounded and can no longer be
compared to the created transform string.
---
 examples/offscreen-canvas.js         |  4 ++--
 src/ol/render/canvas.js              | 23 -----------------------
 src/ol/renderer/canvas/ImageLayer.js |  4 ++--
 src/ol/renderer/canvas/TileLayer.js  |  4 ++--
 src/ol/transform.js                  | 18 ++++++++++++++++--
 5 files changed, 22 insertions(+), 31 deletions(-)

diff --git a/examples/offscreen-canvas.js b/examples/offscreen-canvas.js
index 3e5f62eea6..b030b29226 100644
--- a/examples/offscreen-canvas.js
+++ b/examples/offscreen-canvas.js
@@ -6,8 +6,8 @@ import Worker from 'worker-loader!./offscreen-canvas.worker.js'; //eslint-disabl
 import stringify from 'json-stringify-safe';
 import {FullScreen} from '../src/ol/control.js';
 import {compose, create} from '../src/ol/transform.js';
-import {createTransformString} from '../src/ol/render/canvas.js';
 import {createXYZ} from '../src/ol/tilegrid.js';
+import {toString as toTransformString} from '../src/ol/transform.js';
 
 const worker = new Worker();
 
@@ -45,7 +45,7 @@ function updateContainerTransform() {
         0
       );
     }
-    transformContainer.style.transform = createTransformString(transform);
+    transformContainer.style.transform = toTransformString(transform);
   }
 }
 
diff --git a/src/ol/render/canvas.js b/src/ol/render/canvas.js
index 2ad12b8033..906928423d 100644
--- a/src/ol/render/canvas.js
+++ b/src/ol/render/canvas.js
@@ -7,7 +7,6 @@ import {WORKER_OFFSCREEN_CANVAS} from '../has.js';
 import {clear} from '../obj.js';
 import {createCanvasContext2D} from '../dom.js';
 import {getFontParameters} from '../css.js';
-import {toString} from '../transform.js';
 
 /**
  * @typedef {Object} FillState
@@ -489,25 +488,3 @@ function executeLabelInstructions(label, context) {
     }
   }
 }
-
-/**
- * @type {HTMLCanvasElement}
- * @private
- */
-let createTransformStringCanvas = null;
-
-/**
- * @param {import("../transform.js").Transform} transform Transform.
- * @return {string} CSS transform.
- */
-export function createTransformString(transform) {
-  if (WORKER_OFFSCREEN_CANVAS) {
-    return toString(transform);
-  } else {
-    if (!createTransformStringCanvas) {
-      createTransformStringCanvas = createCanvasContext2D(1, 1).canvas;
-    }
-    createTransformStringCanvas.style.transform = toString(transform);
-    return createTransformStringCanvas.style.transform;
-  }
-}
diff --git a/src/ol/renderer/canvas/ImageLayer.js b/src/ol/renderer/canvas/ImageLayer.js
index 72e6933b90..266d36bed5 100644
--- a/src/ol/renderer/canvas/ImageLayer.js
+++ b/src/ol/renderer/canvas/ImageLayer.js
@@ -7,9 +7,9 @@ import {ENABLE_RASTER_REPROJECTION} from '../../reproj/common.js';
 import {assign} from '../../obj.js';
 import {compose as composeTransform, makeInverse} from '../../transform.js';
 import {containsExtent, intersects} from '../../extent.js';
-import {createTransformString} from '../../render/canvas.js';
 import {fromUserExtent} from '../../proj.js';
 import {getIntersection, isEmpty} from '../../extent.js';
+import {toString as toTransformString} from '../../transform.js';
 
 /**
  * @classdesc
@@ -132,7 +132,7 @@ class CanvasImageLayerRenderer extends CanvasLayerRenderer {
     );
     makeInverse(this.inversePixelTransform, this.pixelTransform);
 
-    const canvasTransform = createTransformString(this.pixelTransform);
+    const canvasTransform = toTransformString(this.pixelTransform);
 
     this.useContainer(target, canvasTransform, layerState.opacity);
 
diff --git a/src/ol/renderer/canvas/TileLayer.js b/src/ol/renderer/canvas/TileLayer.js
index a9745014e9..6cffd7f854 100644
--- a/src/ol/renderer/canvas/TileLayer.js
+++ b/src/ol/renderer/canvas/TileLayer.js
@@ -16,10 +16,10 @@ import {
   getIntersection,
   getTopLeft,
 } from '../../extent.js';
-import {createTransformString} from '../../render/canvas.js';
 import {fromUserExtent} from '../../proj.js';
 import {getUid} from '../../util.js';
 import {numberSafeCompareFunction} from '../../array.js';
+import {toString as toTransformString} from '../../transform.js';
 
 /**
  * @classdesc
@@ -280,7 +280,7 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
       -height / 2
     );
 
-    const canvasTransform = createTransformString(this.pixelTransform);
+    const canvasTransform = toTransformString(this.pixelTransform);
 
     this.useContainer(target, canvasTransform, layerState.opacity);
     const context = this.context;
diff --git a/src/ol/transform.js b/src/ol/transform.js
index ed9799b955..7e315f0143 100644
--- a/src/ol/transform.js
+++ b/src/ol/transform.js
@@ -1,6 +1,7 @@
 /**
  * @module ol/transform
  */
+import {WORKER_OFFSCREEN_CANVAS} from './has.js';
 import {assert} from './asserts.js';
 
 /**
@@ -265,11 +266,24 @@ export function determinant(mat) {
 }
 
 /**
- * A string version of the transform.  This can be used
+ * @type {HTMLElement}
+ * @private
+ */
+let transformStringDiv;
+
+/**
+ * A rounded string version of the transform.  This can be used
  * for CSS transforms.
  * @param {!Transform} mat Matrix.
  * @return {string} The transform as a string.
  */
 export function toString(mat) {
-  return 'matrix(' + mat.join(', ') + ')';
+  const transformString = 'matrix(' + mat.join(', ') + ')';
+  if (WORKER_OFFSCREEN_CANVAS) {
+    return transformString;
+  }
+  const node =
+    transformStringDiv || (transformStringDiv = document.createElement('div'));
+  node.style.transform = transformString;
+  return node.style.transform;
 }