Improve dom mask

helxplatform · Feb 27, 2024 · 58b879e · 58b879e
1 parent dac48ed
commit 58b879e
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/src/hooks/use-synthetic-dom-mask.tsx b/src/hooks/use-synthetic-dom-mask.tsx
@@ -4,7 +4,7 @@ import { v4 as uuid } from 'uuid'
 const prepareMaskContainer = (): HTMLDivElement => {
     const mask = document.createElement("div")
     mask.id = "mask-" + uuid()
-    mask.style.position = "relative"
+    mask.style.position = "absolute"
     mask.style.zIndex = "999999"
     mask.style.pointerEvents = "none"
     mask.style.borderRadius = "4px"
@@ -69,15 +69,15 @@ export const useSyntheticDOMMask = (
         }
     }, [selector, selectorInterval])
 
-    // Make sure the mask displays properly and maintain proper position/size
+    // Make sure the mask displays properly and maintains correct position/size
     useEffect(() => {
         const observers: IntersectionObserver[] = []
         let interval: number
         let cancelled = false
         if (!mask || !elementMasks) return
         if (!show) mask.style.display = "none"
         else {
-            mask.style.display = "initial"
+            mask.style.display = "block"
 
             const resizeMasks = () => {
                 const elements = Array.from(elementMasks.keys())
@@ -104,7 +104,6 @@ export const useSyntheticDOMMask = (
 
             Array.from(elementMasks.keys()).forEach((element) => {
                 const elementMask = elementMasks.get(element)!
-                elementMask.style.backgroundColor = "red"
             })
 
             /*

diff --git a/src/index.css b/src/index.css
@@ -10,6 +10,7 @@ body {
   /* font-family: -apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji; */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  position: relative;
 }
 
 code {