From aea4c3305da1341e4a1f2cc61dd0fd70b4ba0339 Mon Sep 17 00:00:00 2001
From: Keillion <735699921@qq.com>
Date: Wed, 24 May 2023 17:42:17 +0800
Subject: [PATCH 1/4] Update 3.show-result-texts-on-the-video.html

---
 4.use-case/3.show-result-texts-on-the-video.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/4.use-case/3.show-result-texts-on-the-video.html b/4.use-case/3.show-result-texts-on-the-video.html
index 2f22b219..1ef795f4 100644
--- a/4.use-case/3.show-result-texts-on-the-video.html
+++ b/4.use-case/3.show-result-texts-on-the-video.html
@@ -25,7 +25,7 @@
         word-break: break-all;
         word-wrap: break-word;
         box-shadow: 5px 5px 5px 3px rgba(0,0,0,0.2);
-        transform: translate(-50%, -4px);
+        transform: translate(-50%, calc(-100% - 4px));
       }
       .bubble-box::after{
         content: '';
@@ -116,7 +116,7 @@
               if (bodyStyle.position === "static") {
                 Object.assign(divInf.style, {
                   left: `${(convertedP1.x + convertedP2.x) / 2}px`,
-                  bottom: `${document.documentElement.clientHeight  - convertedP1.y}px`,
+                  top: `${convertedP1.y}px`,
                 });
               } else { // if you set body `position` as `relative`, `absolute`, things can get complicated
                 const bodyRect = document.body.getBoundingClientRect();
@@ -124,7 +124,7 @@
                 const bodyBorderBottom = parseFloat(bodyStyle.borderBottomWidth);
                 Object.assign(divInf.style, {
                   left: `${(convertedP1.x + convertedP2.x) / 2 - bodyRect.left - bodyBorderLeft}px`,
-                  bottom: `${bodyRect.bottom - convertedP1.y - bodyBorderBottom}px`,
+                  top: `${convertedP1.y - bodyRect.top - bodyBorderBottom}px`,
                 });
               }
               divInf.innerText = result.barcodeText;

From 82b2f2da3b7020a412cb63f7b58819d524a410f4 Mon Sep 17 00:00:00 2001
From: Keillion <735699921@qq.com>
Date: Wed, 24 May 2023 17:47:48 +0800
Subject: [PATCH 2/4] Update 3.show-result-texts-on-the-video.html

---
 4.use-case/3.show-result-texts-on-the-video.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/4.use-case/3.show-result-texts-on-the-video.html b/4.use-case/3.show-result-texts-on-the-video.html
index 1ef795f4..97c1a002 100644
--- a/4.use-case/3.show-result-texts-on-the-video.html
+++ b/4.use-case/3.show-result-texts-on-the-video.html
@@ -121,10 +121,10 @@
               } else { // if you set body `position` as `relative`, `absolute`, things can get complicated
                 const bodyRect = document.body.getBoundingClientRect();
                 const bodyBorderLeft = parseFloat(bodyStyle.borderLeftWidth);
-                const bodyBorderBottom = parseFloat(bodyStyle.borderBottomWidth);
+                const bodyBorderTop = parseFloat(bodyStyle.borderTopWidth);
                 Object.assign(divInf.style, {
                   left: `${(convertedP1.x + convertedP2.x) / 2 - bodyRect.left - bodyBorderLeft}px`,
-                  top: `${convertedP1.y - bodyRect.top - bodyBorderBottom}px`,
+                  top: `${convertedP1.y - bodyRect.top - bodyBorderTop}px`,
                 });
               }
               divInf.innerText = result.barcodeText;

From d757c58be009e0ccd38c79682df21eb87411fcbe Mon Sep 17 00:00:00 2001
From: Keillion <735699921@qq.com>
Date: Wed, 24 May 2023 18:25:18 +0800
Subject: [PATCH 3/4] scroll

---
 4.use-case/3.show-result-texts-on-the-video.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/4.use-case/3.show-result-texts-on-the-video.html b/4.use-case/3.show-result-texts-on-the-video.html
index 97c1a002..87f22c52 100644
--- a/4.use-case/3.show-result-texts-on-the-video.html
+++ b/4.use-case/3.show-result-texts-on-the-video.html
@@ -123,8 +123,8 @@
                 const bodyBorderLeft = parseFloat(bodyStyle.borderLeftWidth);
                 const bodyBorderTop = parseFloat(bodyStyle.borderTopWidth);
                 Object.assign(divInf.style, {
-                  left: `${(convertedP1.x + convertedP2.x) / 2 - bodyRect.left - bodyBorderLeft}px`,
-                  top: `${convertedP1.y - bodyRect.top - bodyBorderTop}px`,
+                  left: `${(convertedP1.x + convertedP2.x) / 2 - (bodyRect.left + document.documentElement.scrollLeft) - bodyBorderLeft}px`,
+                  top: `${convertedP1.y - (bodyRect.top + document.documentElement.scrollTop) - bodyBorderTop}px`,
                 });
               }
               divInf.innerText = result.barcodeText;

From a907a8c4f139018781321411351fa0492f8035af Mon Sep 17 00:00:00 2001
From: Keillion <735699921@qq.com>
Date: Wed, 24 May 2023 19:36:45 +0800
Subject: [PATCH 4/4] right -999

---
 4.use-case/3.show-result-texts-on-the-video.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/4.use-case/3.show-result-texts-on-the-video.html b/4.use-case/3.show-result-texts-on-the-video.html
index 87f22c52..5d6fc551 100644
--- a/4.use-case/3.show-result-texts-on-the-video.html
+++ b/4.use-case/3.show-result-texts-on-the-video.html
@@ -19,6 +19,7 @@
       .bubble-box{
         max-width: 20rem; /* You are likely to change it */
         position: absolute;
+        right: -999px;
         background: white;
         border-radius: 4px; 
         padding: 4px;