From 7d53a9a87f9d36c45733f4ae535052b2d28567b0 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sat, 4 May 2024 00:12:03 +0800
Subject: [PATCH] perf: optimize background rendering with transform-gpu

---
 src/components/AppBackground.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/AppBackground.vue b/src/components/AppBackground.vue
index 82276c37..4a1e3038 100644
--- a/src/components/AppBackground.vue
+++ b/src/components/AppBackground.vue
@@ -38,39 +38,39 @@ function setAppWallpaperMaskingOpacity() {
       <!-- background -->
       <div
         pos="absolute top-0 left-0" w-full h-full duration-300 bg="cover center $bew-homepage-bg"
-        z--1
+        z--1 transform-gpu
         :style="{ backgroundImage: `url('${settings.individuallySetSearchPageWallpaper ? getBewlyImage(settings.searchPageWallpaper) : getBewlyImage(settings.wallpaper)}')` }"
       />
       <!-- background mask -->
-      <transition name="fade">
+      <Transition name="fade">
         <div
           v-if="(!settings.individuallySetSearchPageWallpaper && settings.enableWallpaperMasking) || (settings.searchPageEnableWallpaperMasking)"
           pos="absolute top-0 left-0" w-full h-full pointer-events-none bg="$bew-homepage-bg-mask"
-          duration-300 z--1
+          duration-300 z--1 transform-gpu
           :style="{
             backdropFilter: `blur(${settings.individuallySetSearchPageWallpaper ? settings.searchPageWallpaperBlurIntensity : settings.wallpaperBlurIntensity}px)`,
           }"
         />
-      </transition>
+      </Transition>
     </div>
     <div v-else>
       <!-- background -->
       <div
         :style="{ backgroundImage: `url('${getBewlyImage(settings.wallpaper)}')` }"
         pos="absolute top-0 left-0" w-full h-full duration-300 bg="cover center $bew-homepage-bg"
-        z--1
+        z--1 transform-gpu
       />
       <!-- background mask -->
-      <transition name="fade">
+      <Transition name="fade">
         <div
           v-if="settings.enableWallpaperMasking"
           pos="absolute top-0 left-0" w-full h-full pointer-events-none bg="$bew-homepage-bg-mask"
-          duration-300 z--1
+          duration-300 z--1 transform-gpu
           :style="{
             backdropFilter: `blur(${settings.wallpaperBlurIntensity}px)`,
           }"
         />
-      </transition>
+      </Transition>
     </div>
   </Transition>
 </template>