From b5b5776275ceb676bd0b27964590f59bb4104a45 Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Mon, 23 Feb 2026 15:00:40 +0900
Subject: [PATCH] Disable the blur effect on dialog overlays when GPU
 acceleration is disabled

---
 src/components/FullscreenImagePreview.vue  | 6 +++++-
 src/components/ui/dialog/DialogOverlay.vue | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/FullscreenImagePreview.vue b/src/components/FullscreenImagePreview.vue
index 6b3366ed..c10712f6 100644
--- a/src/components/FullscreenImagePreview.vue
+++ b/src/components/FullscreenImagePreview.vue
@@ -1,7 +1,8 @@
 <template>
     <Dialog v-model:open="open">
         <DialogPortal :to="portalTo">
-            <RekaDialogOverlay class="fixed inset-0 bg-background/80 backdrop-blur-sm" />
+            <RekaDialogOverlay
+                :class="cn('fixed inset-0 bg-background/80', !disableGpuAcceleration && 'backdrop-blur-sm')" />
 
             <RekaDialogContent
                 class="fixed inset-0 p-6 sm:p-10 border-0 bg-transparent shadow-none outline-none"
@@ -101,8 +102,10 @@
     import { Button } from '@/components/ui/button';
     import { Dialog } from '@/components/ui/dialog';
     import { acquireModalPortalLayer } from '@/lib/modalPortalLayers';
+    import { cn } from '@/lib/utils';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
+    import { useGeneralSettingsStore } from '@/stores/settings/general';
     import { useI18n } from 'vue-i18n';
 
     import Noty from 'noty';
@@ -112,6 +115,7 @@
 
     const galleryStore = useGalleryStore();
     const { fullscreenImageDialog } = storeToRefs(galleryStore);
+    const { disableGpuAcceleration } = storeToRefs(useGeneralSettingsStore());
     const { t } = useI18n();
 
     const viewerEl = ref(null);
diff --git a/src/components/ui/dialog/DialogOverlay.vue b/src/components/ui/dialog/DialogOverlay.vue
index 43ba5b74..32976778 100644
--- a/src/components/ui/dialog/DialogOverlay.vue
+++ b/src/components/ui/dialog/DialogOverlay.vue
@@ -2,6 +2,8 @@
     import { DialogOverlay } from 'reka-ui';
     import { cn } from '@/lib/utils';
     import { reactiveOmit } from '@vueuse/core';
+    import { storeToRefs } from 'pinia';
+    import { useGeneralSettingsStore } from '@/stores/settings/general';
 
     const props = defineProps({
         forceMount: { type: Boolean, required: false },
@@ -11,6 +13,7 @@
     });
 
     const delegatedProps = reactiveOmit(props, 'class');
+    const { disableGpuAcceleration } = storeToRefs(useGeneralSettingsStore());
 </script>
 
 <template>
@@ -19,7 +22,8 @@
         v-bind="delegatedProps"
         :class="
             cn(
-                'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/40 backdrop-blur-xs',
+                'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/40',
+                !disableGpuAcceleration && 'backdrop-blur-xs',
                 props.class
             )
         ">