fix modal scrolling performance on mobile (#3343)

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 24, 2024 · fbb0f9b · fbb0f9b
1 parent 6af0dba
commit fbb0f9b
Show file tree

Hide file tree

Showing 45 changed files with 19 additions and 2 deletions.
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
@@ -88,7 +88,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
@@ -22,6 +22,7 @@ import { useModalState } from '../../hooks/useModalState';
 import { AnimatedLoading } from '../../icons/AnimatedLoading';
 import { SvgLogo } from '../../icons/logo';
 import { SvgDelete } from '../../icons/v0';
+import { useResponsive } from '../../ResponsiveProvider';
 import { styles, theme } from '../../style';
 import { tokens } from '../../tokens';
 
@@ -52,6 +53,7 @@ export const Modal = ({
   containerProps,
   ...props
 }: ModalProps) => {
+  const { isNarrowWidth } = useResponsive();
   const { enableScope, disableScope } = useHotkeysContext();
 
   // This deactivates any key handlers in the "app" scope
@@ -82,7 +84,15 @@ export const Modal = ({
         alignItems: 'center',
         justifyContent: 'center',
         fontSize: 14,
-        backdropFilter: 'blur(1px) brightness(0.9)',
+        willChange: 'transform',
+        // on mobile, we disable the blurred background for performance reasons
+        ...(isNarrowWidth
+          ? {
+              backgroundColor: 'rgba(0, 0, 0, 0.4)',
+            }
+          : {
+              backdropFilter: 'blur(1px) brightness(0.9)',
+            }),
         ...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