fix modal scrolling performance on mobile

This is primarily done by removing the blur effect from the overlay, and replacing it will a translucent black. The blur effect performs poorly on mobile devices.
actualbudget · Sep 23, 2024 · 07580e8 · 07580e8
1 parent 09e3721
commit 07580e8
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 2 deletions.
diff --git a/.../e2e/accounts.test.js-snapshots/Accounts-closes-an-account-1-chromium-linux.png b/.../e2e/accounts.test.js-snapshots/Accounts-closes-an-account-1-chromium-linux.png
diff --git a/.../e2e/accounts.test.js-snapshots/Accounts-closes-an-account-2-chromium-linux.png b/.../e2e/accounts.test.js-snapshots/Accounts-closes-an-account-2-chromium-linux.png
diff --git a/.../e2e/accounts.test.js-snapshots/Accounts-closes-an-account-3-chromium-linux.png b/.../e2e/accounts.test.js-snapshots/Accounts-closes-an-account-3-chromium-linux.png
diff --git a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
@@ -87,7 +87,8 @@ function CategoryList({
     <View>
       <View
         style={{
-          overflow: 'auto',
+          overflowY: 'auto',
+          willChange: 'transform',
           padding: '5px 0',
           ...(!embedded && { maxHeight: 175 }),
         }}

diff --git a/packages/desktop-client/src/components/common/Modal.tsx b/packages/desktop-client/src/components/common/Modal.tsx
@@ -81,7 +81,8 @@ export const Modal = ({
         alignItems: 'center',
         justifyContent: 'center',
         fontSize: 14,
-        backdropFilter: 'blur(1px) brightness(0.9)',
+        backgroundColor: 'rgba(0, 0, 0, 0.2)',
+        willChange: 'transform',
         ...style,
       }}
       {...props}

diff --git a/upcoming-release-notes/3343.md b/upcoming-release-notes/3343.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [tim-smart]
+---
+
+Fix slow scrolling in mobile modals