From 31e12db4ed3d71bfe4591f2294ed8bc70b404eff Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sat, 4 May 2024 00:32:26 +0800
Subject: [PATCH] perf: add `transform-gpu` to improve performance

---
 src/components/Select.vue                                 | 8 ++++----
 .../Settings/components/ChildSettingsDialog.vue           | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index 6b20a325..d99f0293 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -83,14 +83,14 @@ function onMouseEnter() {
         transition="all duration-300"
       />
     </div>
-    <transition>
+    <Transition>
       <div
         v-if="showOptions"
         style="backdrop-filter: var(--bew-filter-glass-1)"
         pos="absolute" bg="$bew-elevated-2" shadow="$bew-shadow-2" p="2"
         m="t-2"
         rounded="$bew-radius" z="1" flex="~ col gap-1"
-        w="full" max-h-300px overflow-y-scroll will-change-transform
+        w="full" max-h-300px overflow-y-scroll will-change-transform transform-gpu
       >
         <div
           v-for="option in options"
@@ -106,14 +106,14 @@ function onMouseEnter() {
           <span v-text="option.label" />
         </div>
       </div>
-    </transition>
+    </Transition>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .v-enter-active,
 .v-leave-active {
-  --at-apply: transition-all duration-500;
+  --at-apply: transition-all duration-500 transform-gpu;
 }
 
 .v-enter-from,
diff --git a/src/components/Settings/components/ChildSettingsDialog.vue b/src/components/Settings/components/ChildSettingsDialog.vue
index 898e4429..fe868de0 100644
--- a/src/components/Settings/components/ChildSettingsDialog.vue
+++ b/src/components/Settings/components/ChildSettingsDialog.vue
@@ -25,7 +25,7 @@ function handleClose() {
         backdrop-filter: var(--bew-filter-glass-2);
       "
       pos="fixed top-1/2 left-1/2" bg="$bew-content-2 dark:$bew-elevated-1" rounded="$bew-radius"
-      transform="translate--1/2" z-2 shadow overflow="x-hidden y-overlay" w="$b-dialog-width"
+      transform="translate--1/2 translate-z-0 gpu" z-2 shadow overflow="x-hidden y-overlay" w="$b-dialog-width"
       h="$b-dialog-height" antialiased
     >
       <header