From a99c6f5c77829d09d752eade64dc89184bd2be71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jovan=20Kruni=C4=87?= <krunic@rz.uni-frankfurt.de>
Date: Thu, 8 Oct 2026 17:53:30 +0200
Subject: [PATCH] fix: blurred news image background detail in firefox

---
 .../types/message/message-detail-content.html     |  2 +-
 .../types/message/message-detail-content.scss     | 15 ++++++++++-----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/frontend/app/src/app/modules/data/types/message/message-detail-content.html b/frontend/app/src/app/modules/data/types/message/message-detail-content.html
index 25055948..d31eb3ef 100644
--- a/frontend/app/src/app/modules/data/types/message/message-detail-content.html
+++ b/frontend/app/src/app/modules/data/types/message/message-detail-content.html
@@ -44,7 +44,7 @@
   </div>
 } @else {
   @if (item.image) {
-    <ion-thumbnail style="background-image: url('{{ item.image }}')">
+    <ion-thumbnail [style.--image]="'url(' + item.image + ')'">
       <ion-img
         src="{{ item.image }}"
         (ionError)="$any($event.target).nextSibling.style.display = 'none'"
diff --git a/frontend/app/src/app/modules/data/types/message/message-detail-content.scss b/frontend/app/src/app/modules/data/types/message/message-detail-content.scss
index 5e58af0f..7a1ef736 100644
--- a/frontend/app/src/app/modules/data/types/message/message-detail-content.scss
+++ b/frontend/app/src/app/modules/data/types/message/message-detail-content.scss
@@ -16,7 +16,6 @@
 :host {
   ion-thumbnail {
     position: relative;
-    transform: scaleX(-1);
 
     overflow: hidden;
 
@@ -24,14 +23,20 @@
     height: auto;
     margin-inline: auto;
 
-    background-position: center;
-    background-size: contain;
+    &::before {
+      content: '';
+
+      position: absolute;
+      inset: -32px;
+
+      background: var(--image) center / cover;
+      filter: blur(32px);
+    }
 
     ion-img {
-      backdrop-filter: blur(32px);
+      position: relative; // above ::before
 
       &::part(image) {
-        transform: scaleX(-1);
         max-width: 16cm;
         margin-inline: auto;
         object-fit: contain;