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;
 }
diff --git a/test/browser/spec/ol/transform.test.js b/test/browser/spec/ol/transform.test.js
index bf0134ff4f..3d6a35a9fa 100644
--- a/test/browser/spec/ol/transform.test.js
+++ b/test/browser/spec/ol/transform.test.js
@@ -11,6 +11,7 @@ import {
   scale,
   set,
   setFromArray,
+  toString,
   translate,
 } from '../../../../src/ol/transform.js';
 
@@ -177,4 +178,12 @@ describe('ol.transform', function () {
       expect(point).to.eql([3, 5]);
     });
   });
+  describe('toString()', function () {
+    it('compares with value read back from node', function () {
+      const mat = [1 / 3, 0, 0, 1 / 3, 0, 0];
+      const node = document.createElement('div');
+      node.style.transform = 'matrix(' + mat.join(',') + ')';
+      expect(toString(mat)).to.be(node.style.transform);
+    });
+  });
 });