From f6f76e02fd4c8828bdb61fa233296f7d33ab7744 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 16 Jan 2026 14:01:40 +0000
Subject: [PATCH] Fix blur visuals by clearing backdrop and forcing inline
 filter on SimilarContentCard

- Clears the card backdrop image when blurring is active to prevent the sharp background from showing through the blurred thumbnail (ghosting effect).
- Adds inline `filter: blur(24px)` to the thumbnail image as a fallback to ensure the blur effect is applied even if the `blur-xl` class is overridden or missing.
- Updates `refreshModerationUi` to handle backdrop restoration when unblurring.
---
 js/ui/components/SimilarContentCard.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/js/ui/components/SimilarContentCard.js b/js/ui/components/SimilarContentCard.js
index b9321967..17b23db3 100644
--- a/js/ui/components/SimilarContentCard.js
+++ b/js/ui/components/SimilarContentCard.js
@@ -754,9 +754,18 @@ export class SimilarContentCard {
       if (shouldBlur) {
         this.thumbnailEl.dataset.thumbnailState = "blurred";
         this.thumbnailEl.classList.add("blur-xl");
+        // Force blur style in case class utility is missing or overridden,
+        // and clear the backdrop so the sharp background doesn't show through.
+        this.thumbnailEl.style.filter = "blur(24px)";
+        this.setCardBackdropImage("");
       } else {
         delete this.thumbnailEl.dataset.thumbnailState;
         this.thumbnailEl.classList.remove("blur-xl");
+        this.thumbnailEl.style.filter = "";
+        // Restore backdrop if src is available
+        if (this.thumbnailEl.src) {
+          this.setCardBackdropImage(this.thumbnailEl.src);
+        }
       }
     }
 
@@ -826,6 +835,8 @@ export class SimilarContentCard {
     if (this.shouldMaskNsfwForOwner || this.video?.moderation?.blurThumbnail) {
       img.dataset.thumbnailState = "blurred";
       img.classList.add("blur-xl");
+      // Pre-apply style to avoid flash
+      img.style.filter = "blur(24px)";
     }
 
     const handleLoad = () => {