From 37ec143d3d7e39d2de91f67f78665b3dc5111d39 Mon Sep 17 00:00:00 2001
From: Igor Zinken <igor.zinken@igorski.nl>
Date: Tue, 29 Dec 2020 21:02:53 +0100
Subject: [PATCH] Transparency blocks are now behind canvas, not its wrapper

---
 README.md                                       |  1 -
 .../document-canvas/document-canvas.vue         | 17 +++++++++--------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 5173272..1decc19 100644
--- a/README.md
+++ b/README.md
@@ -56,7 +56,6 @@ npm run lint
 
 # TODO / Roadmap
 
-* Transparency blocks should be rendered by zCanvas, not parent div
 * Restoring positions of documents with positioned rotated objects is not accurate
 * Issue with drawing mask on mirrored content
 * Moving of flipped / rotated content leads to occasional non-renders (isInsideViewport doesn't take rotated rectangles into account)
diff --git a/src/components/document-canvas/document-canvas.vue b/src/components/document-canvas/document-canvas.vue
index 9fbcff6..6c35087 100644
--- a/src/components/document-canvas/document-canvas.vue
+++ b/src/components/document-canvas/document-canvas.vue
@@ -313,7 +313,6 @@ export default {
 .canvas-wrapper {
     display: inline-block;
     width: 100%;
-    background: url( "../../assets/images/document_transparent_bg.png" ) repeat fixed;
     @include component();
 
     .content {
@@ -322,14 +321,9 @@ export default {
         overflow: none;
         display: block;
 
-        &.center canvas {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-        }
-
         canvas {
+            background: url( "../../assets/images/document_transparent_bg.png" ) repeat;
+
             &.no-cursor {
                 cursor: none;
             }
@@ -343,6 +337,13 @@ export default {
                 cursor: crosshair;
             }
         }
+
+        &.center canvas {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
     }
 }
 </style>