Bug fixes

Author: strayfade

css/backdrop-blur.css

@@ -1,7 +1,7 @@
 .backdrop-blur {
     overflow: hidden;
     z-index: 9;
-    backdrop-filter: blur(25px) brightness(25%);
+    backdrop-filter: blur(0px) brightness(25%);
     opacity: 1;
     transition-duration: 0.25s;
     pointer-events: all;

css/message-tail.css

@@ -1,16 +1,15 @@
 .message-tail {
     position: absolute;
     z-index: -1;
+    bottom: -5px;
 }
 
 .message-sender-tail {
-    bottom: -1px;
     transform: scaleX(-100%);
     right: -5px;
 }
 
 .message-recipient-tail {
-    bottom: -1px;
     left: -5px;
 }
 

css/message.css

@@ -35,6 +35,8 @@
 
 .message-clone {
     z-index: 10;
+    position: absolute;
+    pointer-events: none;
 }
 
 .message-media {

pages/Home.js

@@ -73,8 +73,6 @@ const Home = async () => {
                 </div>
             </div>
 
-            <div class="backdrop-blur backdrop-blur-hidden" onclick="HideReactionPopups()"></div>
-
         </div>
         <div class="page-view page-view-popup page-view-popup-hidden" id="settings-page">
             <div class="settings-scroll">
@@ -224,6 +222,9 @@ const Home = async () => {
             </div>
         </div>
     </main>
+
+    <div class="backdrop-blur backdrop-blur-hidden" onclick="HideReactionPopups()"></div>
+    
     <script>${
         await (async() => {
             Log(`Embedding file "../build/production.js" into HTML document!`, LogColors.Success)

scripts/iMessage.js

@@ -347,8 +347,8 @@ const HideReactionPopups = async () => {
         document.getElementsByClassName("reaction-popup")[0].classList.remove("reaction-popup-visible")
     document.getElementsByClassName("backdrop-blur")[0].classList.add('backdrop-blur-hidden')
     await new Promise(r => setTimeout(r, 500));
-    while (document.getElementsByClassName("message-clone")[0])
-        document.getElementsByClassName("message-clone")[0].remove()
+    //if (document.getElementsByClassName("message-clone")[0])
+    //    document.getElementsByClassName("message-clone")[0].remove()
 }
 
 const ShowSettings = () => {
@@ -621,16 +621,6 @@ const CreateMessageBubble = (TypingIndicator = false, MessageJSON = {}, Message
 
             const MessageArea = MessageContentItem.getBoundingClientRect()
 
-            // Clone current message to display on top-level
-            const CloneMessage = CreateMessageBubble(TypingIndicator, MessageJSON, Message, Sender, AddTail, false)[0]
-            CloneMessage.classList.add("message-clone")
-            document.getElementById("page1").appendChild(CloneMessage)
-            CloneMessage.style.top = `-${window.visualViewport.height - MessageArea.top - 46}px`
-            if (Sender)
-                CloneMessage.style.right = `${window.visualViewport.width - MessageArea.right - 12}px`
-            else
-                CloneMessage.style.left = `${MessageArea.left - 12}px`
-
             // Create new tapback popup
             let ReactionPopup = document.createElement("div")
             ReactionPopup.classList.add("reaction-popup")
@@ -654,6 +644,19 @@ const CreateMessageBubble = (TypingIndicator = false, MessageJSON = {}, Message
             document.getElementsByClassName("backdrop-blur")[0].classList.remove('backdrop-blur-hidden')
             document.body.appendChild(ReactionPopup)
 
+            // Clone current message to display on top-level
+            const CloneMessage = CreateMessageBubble(TypingIndicator, MessageJSON, Message, Sender, AddTail, false)[0]
+            CloneMessage.classList.add("message-clone")
+
+            if (document.getElementsByClassName("message-clone")[0])
+                document.getElementsByClassName("message-clone")[0].remove()
+            document.getElementsByClassName("reaction-popup")[0].parentElement.insertBefore(CloneMessage, document.getElementsByClassName("reaction-popup")[0])
+            CloneMessage.style.top = `${MessageArea.top - 6}px`
+            if (Sender)
+                CloneMessage.style.right = `${window.visualViewport.width - MessageArea.right - 12}px`
+            else
+                CloneMessage.style.left = `${MessageArea.left - 12}px`
+
             let CurrentReactions = JSON.parse(MessageContentItem.getAttribute("rawjson")).reactions
             for (let x = 0; x < CurrentReactions.length; x++) {
                 if (CurrentReactions[x].sender == 1 && CurrentReactions[x].reactionType < 3000) {
@@ -697,7 +700,7 @@ const SetTypingIndicator = (On = true) => {
 }
 
 const LoadFetchedMessages = async (json) => {
-    
+
     while (MessageContainer.firstChild)
         MessageContainer.firstChild.remove()
 
@@ -1283,7 +1286,6 @@ setInterval(() => {
     }
 }, 60000);
 
-console.log(GetPrefetchedContacts())
 if (GetPrefetchedContacts()) {
     LoadFetchedChats(GetPrefetchedContacts())
 }