fix(QrcodeStream): dedicated stacking context

Closes #78

Author: gruhn

src/components/QrcodeReader.vue

@@ -4,23 +4,6 @@
 <template lang="html">
   <div class="qrcode-reader">
     <div class="qrcode-reader__inner-wrapper">
-      <QrcodeDropZone
-        @detect="onDetect"
-        class="qrcode-reader__overlay">
-        <slot></slot>
-      </QrcodeDropZone>
-
-      <canvas
-        ref="trackingLayer"
-        class="qrcode-reader__tracking-layer"
-      ></canvas>
-
-      <canvas
-        ref="pauseFrame"
-        v-show="!shouldScan"
-        class="qrcode-reader__pause-frame"
-      ></canvas>
-
       <video
         ref="video"
         v-show="shouldScan"
@@ -29,6 +12,23 @@
         muted
         playsinline
       ></video>
+
+      <canvas
+        ref="pauseFrame"
+        v-show="!shouldScan"
+        class="qrcode-reader__pause-frame"
+      ></canvas>
+
+      <canvas
+        ref="trackingLayer"
+        class="qrcode-reader__tracking-layer"
+      ></canvas>
+
+      <QrcodeDropZone
+        @detect="onDetect"
+        class="qrcode-reader__overlay">
+        <slot></slot>
+      </QrcodeDropZone>
     </div>
   </div>
 </template>
@@ -332,6 +332,7 @@ export default {
   position: relative;
   max-width: 100%;
   max-height: 100%;
+  z-index: 0;
 }
 
 .qrcode-reader__overlay,
@@ -350,12 +351,4 @@ export default {
   max-width: 100%;
   max-height: 100%;
 }
-
-.qrcode-reader__overlay {
-  z-index: 30;
-}
-
-.qrcode-reader__tracking-layer {
-  z-index: 20;
-}
 </style>

src/components/QrcodeStream.vue

@@ -1,22 +1,6 @@
 <template lang="html">
   <div class="qrcode-stream">
     <div class="qrcode-stream__inner-wrapper">
-      <div
-        class="qrcode-stream__overlay">
-        <slot></slot>
-      </div>
-
-      <canvas
-        ref="trackingLayer"
-        class="qrcode-stream__tracking-layer"
-      ></canvas>
-
-      <canvas
-        ref="pauseFrame"
-        v-show="!shouldScan"
-        class="qrcode-stream__pause-frame"
-      ></canvas>
-
       <video
         ref="video"
         v-show="shouldScan"
@@ -25,6 +9,21 @@
         muted
         playsinline
       ></video>
+
+      <canvas
+        ref="pauseFrame"
+        v-show="!shouldScan"
+        class="qrcode-stream__pause-frame"
+      ></canvas>
+
+      <canvas
+        ref="trackingLayer"
+        class="qrcode-stream__tracking-layer"
+      ></canvas>
+
+      <div class="qrcode-stream__overlay">
+        <slot></slot>
+      </div>
     </div>
   </div>
 </template>
@@ -309,6 +308,7 @@ export default {
   position: relative;
   max-width: 100%;
   max-height: 100%;
+  z-index: 0;
 }
 
 .qrcode-stream__overlay,
@@ -327,12 +327,4 @@ export default {
   max-width: 100%;
   max-height: 100%;
 }
-
-.qrcode-stream__overlay {
-  z-index: 30;
-}
-
-.qrcode-stream__tracking-layer {
-  z-index: 20;
-}
 </style>