From d364436817ca678fc23d6b0589b7c2fd7774af3a Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Mon, 24 Feb 2025 17:40:45 -0800
Subject: [PATCH] Fix: fix safari thumbnails again (#9219)

---
 src-ui/src/styles.scss |  2 ++
 src-ui/src/theme.scss  | 23 +----------------------
 2 files changed, 3 insertions(+), 22 deletions(-)

diff --git a/src-ui/src/styles.scss b/src-ui/src/styles.scss
index 589356566..a3f385ed5 100644
--- a/src-ui/src/styles.scss
+++ b/src-ui/src/styles.scss
@@ -767,6 +767,8 @@ canvas.hiddenCanvasElement {
 }
 
 .document-card {
+  overflow: hidden;
+
   .card-footer i-bs svg {
     vertical-align: middle;
   }
diff --git a/src-ui/src/theme.scss b/src-ui/src/theme.scss
index fc8c13d3b..b60b70a0e 100644
--- a/src-ui/src/theme.scss
+++ b/src-ui/src/theme.scss
@@ -190,6 +190,7 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='htt
     border-radius: 0;
     border-color: var(--bs-border-color);
     filter: invert(10%);
+    transform: translateZ(0); // fix for safari to force hw acceleration
 
     &.border-end {
       border-right: none !important;
@@ -204,28 +205,6 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='htt
     mix-blend-mode: luminosity;
   }
 
-  @supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
-    // Safari does not like the filters on the image, see https://github.com/paperless-ngx/paperless-ngx/pull/8121
-    .document-card:not(.placeholder-glow),
-    .document-card-large:not(.placeholder-glow) {
-      .doc-img-container {
-        transition: none;
-        background-color: #ffffff !important;
-      }
-
-      .doc-img {
-        filter: none !important;
-        box-shadow: inset 0px 0px 0px 10px rgba(0,0,0,1);
-      }
-
-      .doc-img.inverted {
-        filter: none !important;
-        mix-blend-mode: difference;
-        opacity: 0.95;
-      }
-    }
-  }
-
   .paperless-input-select .ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option:not(.ng-option-selected):hover,
   .paperless-input-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
     background-color: var(--bs-light) !important;