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 · Oct 10, 2024 · feebe50 · feebe50
1 parent e37a42f
commit feebe50
Show file tree

Hide file tree

Showing 52 changed files with 10 additions and 2 deletions.
diff --git a/...apshots/Accounts-Import-Transactions-import-csv-file-twice-1-chromium-linux.png b/...apshots/Accounts-Import-Transactions-import-csv-file-twice-1-chromium-linux.png
diff --git a/...s-Import-Transactions-imports-transactions-from-a-CSV-file-1-chromium-linux.png b/...s-Import-Transactions-imports-transactions-from-a-CSV-file-1-chromium-linux.png
diff --git a/...s-Import-Transactions-imports-transactions-from-a-CSV-file-2-chromium-linux.png b/...s-Import-Transactions-imports-transactions-from-a-CSV-file-2-chromium-linux.png
diff --git a/...s-Import-Transactions-imports-transactions-from-a-CSV-file-3-chromium-linux.png b/...s-Import-Transactions-imports-transactions-from-a-CSV-file-3-chromium-linux.png
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/...cking--14404-in-the-page-header-opens-the-month-menu-modal-3-chromium-linux.png b/...cking--14404-in-the-page-header-opens-the-month-menu-modal-3-chromium-linux.png
diff --git a/...cking--321fd-ed-amount-opens-the-budget-summary-menu-modal-2-chromium-linux.png b/...cking--321fd-ed-amount-opens-the-budget-summary-menu-modal-2-chromium-linux.png
diff --git a/...cking--4bb70-ed-amount-opens-the-budget-summary-menu-modal-1-chromium-linux.png b/...cking--4bb70-ed-amount-opens-the-budget-summary-menu-modal-1-chromium-linux.png
diff --git a/...cking--6ab37-roup-name-opens-the-category-group-menu-modal-1-chromium-linux.png b/...cking--6ab37-roup-name-opens-the-category-group-menu-modal-1-chromium-linux.png
diff --git a/...cking--94a79-roup-name-opens-the-category-group-menu-modal-2-chromium-linux.png b/...cking--94a79-roup-name-opens-the-category-group-menu-modal-2-chromium-linux.png
diff --git a/...cking--94a85-ed-amount-opens-the-budget-summary-menu-modal-3-chromium-linux.png b/...cking--94a85-ed-amount-opens-the-budget-summary-menu-modal-3-chromium-linux.png
diff --git a/...cking--9e6aa-in-the-page-header-opens-the-budget-page-menu-1-chromium-linux.png b/...cking--9e6aa-in-the-page-header-opens-the-budget-page-menu-1-chromium-linux.png
diff --git a/...cking--bbde3-roup-name-opens-the-category-group-menu-modal-3-chromium-linux.png b/...cking--bbde3-roup-name-opens-the-category-group-menu-modal-3-chromium-linux.png
diff --git a/...cking--bed18-in-the-page-header-opens-the-month-menu-modal-1-chromium-linux.png b/...cking--bed18-in-the-page-header-opens-the-month-menu-modal-1-chromium-linux.png
diff --git a/...cking--ceb3a-in-the-page-header-opens-the-month-menu-modal-2-chromium-linux.png b/...cking--ceb3a-in-the-page-header-opens-the-month-menu-modal-2-chromium-linux.png
diff --git a/...cking--d270d-in-the-page-header-opens-the-budget-page-menu-2-chromium-linux.png b/...cking--d270d-in-the-page-header-opens-the-budget-page-menu-2-chromium-linux.png
diff --git a/...cking--fdd57-in-the-page-header-opens-the-budget-page-menu-3-chromium-linux.png b/...cking--fdd57-in-the-page-header-opens-the-budget-page-menu-3-chromium-linux.png
diff --git a/...hat-clicking-the-balance-cell-opens-the-balance-menu-modal-1-chromium-linux.png b/...hat-clicking-the-balance-cell-opens-the-balance-menu-modal-1-chromium-linux.png
diff --git a/...hat-clicking-the-balance-cell-opens-the-balance-menu-modal-2-chromium-linux.png b/...hat-clicking-the-balance-cell-opens-the-balance-menu-modal-2-chromium-linux.png
diff --git a/...hat-clicking-the-balance-cell-opens-the-balance-menu-modal-3-chromium-linux.png b/...hat-clicking-the-balance-cell-opens-the-balance-menu-modal-3-chromium-linux.png
diff --git a/...hat-clicking-the-budgeted-cell-opens-the-budget-menu-modal-1-chromium-linux.png b/...hat-clicking-the-budgeted-cell-opens-the-budget-menu-modal-1-chromium-linux.png
diff --git a/...hat-clicking-the-budgeted-cell-opens-the-budget-menu-modal-2-chromium-linux.png b/...hat-clicking-the-budgeted-cell-opens-the-budget-menu-modal-2-chromium-linux.png
diff --git a/...hat-clicking-the-budgeted-cell-opens-the-budget-menu-modal-3-chromium-linux.png b/...hat-clicking-the-budgeted-cell-opens-the-budget-menu-modal-3-chromium-linux.png
diff --git a/...t-clicking-the-category-name-opens-the-category-menu-modal-1-chromium-linux.png b/...t-clicking-the-category-name-opens-the-category-menu-modal-1-chromium-linux.png
diff --git a/...t-clicking-the-category-name-opens-the-category-menu-modal-2-chromium-linux.png b/...t-clicking-the-category-name-opens-the-category-menu-modal-2-chromium-linux.png
diff --git a/...t-clicking-the-category-name-opens-the-category-menu-modal-3-chromium-linux.png b/...t-clicking-the-category-name-opens-the-category-menu-modal-3-chromium-linux.png
diff --git a/...cking--0ba04-nt-amount-opens-the-budget-summary-menu-modal-1-chromium-linux.png b/...cking--0ba04-nt-amount-opens-the-budget-summary-menu-modal-1-chromium-linux.png
diff --git a/...cking--1ce6d-nt-amount-opens-the-budget-summary-menu-modal-2-chromium-linux.png b/...cking--1ce6d-nt-amount-opens-the-budget-summary-menu-modal-2-chromium-linux.png
diff --git a/...cking--42062-in-the-page-header-opens-the-month-menu-modal-2-chromium-linux.png b/...cking--42062-in-the-page-header-opens-the-month-menu-modal-2-chromium-linux.png
diff --git a/...cking--49fb6-in-the-page-header-opens-the-month-menu-modal-3-chromium-linux.png b/...cking--49fb6-in-the-page-header-opens-the-month-menu-modal-3-chromium-linux.png
diff --git a/...cking--5f098-roup-name-opens-the-category-group-menu-modal-1-chromium-linux.png b/...cking--5f098-roup-name-opens-the-category-group-menu-modal-1-chromium-linux.png
diff --git a/...cking--929be-roup-name-opens-the-category-group-menu-modal-3-chromium-linux.png b/...cking--929be-roup-name-opens-the-category-group-menu-modal-3-chromium-linux.png
diff --git a/...cking--a3783-in-the-page-header-opens-the-budget-page-menu-1-chromium-linux.png b/...cking--a3783-in-the-page-header-opens-the-budget-page-menu-1-chromium-linux.png
diff --git a/...cking--a8b5e-in-the-page-header-opens-the-budget-page-menu-3-chromium-linux.png b/...cking--a8b5e-in-the-page-header-opens-the-budget-page-menu-3-chromium-linux.png
diff --git a/...cking--b1562-in-the-page-header-opens-the-month-menu-modal-1-chromium-linux.png b/...cking--b1562-in-the-page-header-opens-the-month-menu-modal-1-chromium-linux.png
diff --git a/...cking--dc927-roup-name-opens-the-category-group-menu-modal-2-chromium-linux.png b/...cking--dc927-roup-name-opens-the-category-group-menu-modal-2-chromium-linux.png
diff --git a/...cking--f224f-nt-amount-opens-the-budget-summary-menu-modal-3-chromium-linux.png b/...cking--f224f-nt-amount-opens-the-budget-summary-menu-modal-3-chromium-linux.png
diff --git a/...cking--f8a19-in-the-page-header-opens-the-budget-page-menu-2-chromium-linux.png b/...cking--f8a19-in-the-page-header-opens-the-budget-page-menu-2-chromium-linux.png
diff --git a/...hat-clicking-the-balance-cell-opens-the-balance-menu-modal-1-chromium-linux.png b/...hat-clicking-the-balance-cell-opens-the-balance-menu-modal-1-chromium-linux.png
diff --git a/...hat-clicking-the-balance-cell-opens-the-balance-menu-modal-2-chromium-linux.png b/...hat-clicking-the-balance-cell-opens-the-balance-menu-modal-2-chromium-linux.png
diff --git a/...hat-clicking-the-balance-cell-opens-the-balance-menu-modal-3-chromium-linux.png b/...hat-clicking-the-balance-cell-opens-the-balance-menu-modal-3-chromium-linux.png
diff --git a/...hat-clicking-the-budgeted-cell-opens-the-budget-menu-modal-1-chromium-linux.png b/...hat-clicking-the-budgeted-cell-opens-the-budget-menu-modal-1-chromium-linux.png
diff --git a/...hat-clicking-the-budgeted-cell-opens-the-budget-menu-modal-2-chromium-linux.png b/...hat-clicking-the-budgeted-cell-opens-the-budget-menu-modal-2-chromium-linux.png
diff --git a/...hat-clicking-the-budgeted-cell-opens-the-budget-menu-modal-3-chromium-linux.png b/...hat-clicking-the-budgeted-cell-opens-the-budget-menu-modal-3-chromium-linux.png
diff --git a/...t-clicking-the-category-name-opens-the-category-menu-modal-1-chromium-linux.png b/...t-clicking-the-category-name-opens-the-category-menu-modal-1-chromium-linux.png
diff --git a/...t-clicking-the-category-name-opens-the-category-menu-modal-2-chromium-linux.png b/...t-clicking-the-category-name-opens-the-category-menu-modal-2-chromium-linux.png
diff --git a/...t-clicking-the-category-name-opens-the-category-menu-modal-3-chromium-linux.png b/...t-clicking-the-category-name-opens-the-category-menu-modal-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