Closes #6959 UI issue after clear cache and apply LRC with certain te…

…mplate (#7015)
wp-media · Oct 10, 2024 · 9632180 · 9632180
1 parent d99bce0
commit 9632180
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 5 deletions.
diff --git a/assets/js/wpr-beacon.js b/assets/js/wpr-beacon.js
@@ -257,6 +257,40 @@
       }
       return false;
     }
+    _checkLcrConflict(element) {
+      const conflictingElements = [];
+      const computedStyle = window.getComputedStyle(element);
+      const validMargins = ["marginTop", "marginRight", "marginBottom", "marginLeft"];
+      const negativeMargins = validMargins.some((margin) => parseFloat(computedStyle[margin]) < 0);
+      const currentElementConflicts = negativeMargins || computedStyle.contentVisibility === "auto" || computedStyle.contentVisibility === "hidden";
+      if (currentElementConflicts) {
+        conflictingElements.push({
+          element,
+          conflicts: [
+            negativeMargins && "negative margin",
+            computedStyle.contentVisibility === "auto" && "content-visibility:auto",
+            computedStyle.contentVisibility === "hidden" && "content-visibility:hidden"
+          ].filter(Boolean)
+        });
+      }
+      Array.from(element.children).forEach((child) => {
+        const childStyle = window.getComputedStyle(child);
+        const validMargins2 = ["marginTop", "marginRight", "marginBottom", "marginLeft"];
+        const childNegativeMargins = validMargins2.some((margin) => parseFloat(childStyle[margin]) < 0);
+        const childConflicts = childNegativeMargins || childStyle.position === "absolute" || childStyle.position === "fixed";
+        if (childConflicts) {
+          conflictingElements.push({
+            element: child,
+            conflicts: [
+              childNegativeMargins && "negative margin",
+              childStyle.position === "absolute" && "position:absolute",
+              childStyle.position === "fixed" && "position:fixed"
+            ].filter(Boolean)
+          });
+        }
+      });
+      return conflictingElements;
+    }
     _processElements(elements) {
       elements.forEach(({ element, depth, distance, hash }) => {
         if (this._shouldSkipElement(element, this.config.exclusions || [])) {
@@ -265,6 +299,11 @@
         if ("No hash detected" === hash) {
           return;
         }
+        const conflicts = this._checkLcrConflict(element);
+        if (conflicts.length > 0) {
+          this.logger.logMessage("Skipping element due to conflicts:", conflicts);
+          return;
+        }
         const can_push_hash = element.parentElement && this._getElementDistance(element.parentElement) < this.config.lrc_threshold && distance >= this.config.lrc_threshold;
         const color = can_push_hash ? "green" : distance === 0 ? "red" : "";
         this.logger.logColoredMessage(`${"	".repeat(depth)}${element.tagName} (Depth: ${depth}, Distance from viewport bottom: ${distance}px)`, color);