fix: flickering in chrome when switching views

Related to #253

frontend/app/ios/App/App/Assets.xcassets/AppIcon.appiconset/Contents.json

@@ -1,10 +1,10 @@
 {
   "images": [
     {
-      "filename" : "AppIcon-512@2x.png",
       "idiom": "universal",
-      "platform" : "ios",
+      "size": "1024x1024",
-      "size" : "1024x1024"
+      "filename": "AppIcon-512@2x.png",
+      "platform": "ios"
     }
   ],
   "info": {

frontend/app/package.json

@@ -38,7 +38,7 @@
     "minify-icons": "node scripts/minify-icon-font.mjs",
     "preview": "http-server www/browser --p 8101 -o",
     "push": "git push && git push origin \"v$npm_package_version\"",
-    "resources:ios": "capacitor-assets generate --ios --iconBackgroundColor $(grep -oE \"^@include ion-color\\(primary, #[a-fA-F0-9]{3,6}\" src/theme/colors.scss | grep -oE \"#[a-fA-F0-9]{3,6}\") --splashBackgroundColor $(grep -oE \"^@include ion-color\\(primary, #[a-fA-F0-9]{3,6}\" src/theme/colors.scss | grep -oE \"#[a-fA-F0-9]{3,6}\")",
+    "resources:ios": "capacitor-assets generate --ios --iconBackgroundColor $(grep -oE \"^@include color-system\\.ion-color\\(primary, #[a-fA-F0-9]{3,6}\" src/theme/colors.scss | grep -oE \"#[a-fA-F0-9]{3,6}\") --splashBackgroundColor $(grep -oE \"^@include color-system\\.ion-color\\(primary, #[a-fA-F0-9]{3,6}\" src/theme/colors.scss | grep -oE \"#[a-fA-F0-9]{3,6}\")",
     "run:android": "ionic capacitor run android --livereload --external",
     "start": "ionic serve",
     "start:external": "ionic serve --external",

frontend/app/src/app/animation/fab-expand.ts

@@ -18,7 +18,11 @@ import {AnimationOptions} from '@ionic/angular/common/providers/nav-controller';
 import {iosDuration, iosEasing, mdDuration, mdEasing} from './easings';
 
 /**
- *
+ * Creates the page transition used when opening a page via a FAB: the FAB grows
+ * towards the screen while the new page fades in on top of it. Going back, the
+ * page fades out and reveals the previous page beneath it.
+ * @param animationController Ionic animation controller used to build the animation
+ * @returns animation builder to pass to `[routerAnimation]`
  */
 export function fabExpand(animationController: AnimationController): AnimationBuilder {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -37,18 +41,11 @@ export function fabExpand(animationController: AnimationController): AnimationBu
 
     const useReducedMotion = viewBounds.width > 500;
     const reducedMotionTransform = `${Math.min(viewBounds.width * 0.3, 200)}px`;
-    const reducedMotionViewBorderRadius = '128px';
     const reducedMotionFabGrow = '2';
-    const reducedMotionViewShrink = '0.9';
 
     const viewCenterX = (viewBounds.width - viewBounds.x) / 2;
     const viewCenterY = (viewBounds.height - viewBounds.y) / 2;
 
-    const viewOnFab = useReducedMotion
-      ? `translate(${reducedMotionTransform}, ${reducedMotionTransform}) scale(${reducedMotionViewShrink})`
-      : `translate(${(fabBounds.x - viewBounds.x) / 2}px, ${(fabBounds.y - viewBounds.y) / 2}px) scale(${
-          fabBounds.width / viewBounds.width
-        }, ${fabBounds.height / viewBounds.height})`;
     const fabOnView = useReducedMotion
       ? `translate(-${reducedMotionTransform}, -${reducedMotionTransform}) scale(${reducedMotionFabGrow})`
       : `translate(${viewCenterX - fabBounds.x}px, ${viewCenterY - fabBounds.y}px) scale(${
@@ -56,8 +53,6 @@ export function fabExpand(animationController: AnimationController): AnimationBu
         }, ${viewBounds.height / fabBounds.height})`;
     const transformNormal = `translate(0px, 0px) scale(1, 1)`;
 
-    const viewBorderRadius = useReducedMotion ? reducedMotionViewBorderRadius : '50%';
-
     const fabViewFade = animationController
       .create()
       .beforeStyles({zIndex: -1})
@@ -69,13 +64,12 @@ export function fabExpand(animationController: AnimationController): AnimationBu
       .fromTo('transform', back ? fabOnView : transformNormal, back ? transformNormal : fabOnView)
       .fromTo('opacity', back ? '0' : '1', back ? '1' : '0')
       .fromTo('borderRadius', back ? '0' : '50%', back ? '50%' : '0')
-      .addElement(fab);
+      .addElement(back ? [] : fab);
     const viewGrow = animationController
       .create()
       .beforeStyles({zIndex: 200, overflow: 'hidden', transformOrigin: 'center'})
-      .fromTo('transform', back ? transformNormal : viewOnFab, back ? viewOnFab : transformNormal)
       .fromTo('opacity', back ? '1' : '0', back ? '0' : '1')
-      .fromTo('borderRadius', back ? '0' : viewBorderRadius, back ? viewBorderRadius : '0')
+      .afterStyles(back ? {display: 'none'} : {})
       .addElement(otherView);
 
     return rootTransition.addAnimation(fabGrow).addAnimation(viewGrow).addAnimation(fabViewFade);

frontend/app/src/app/modules/dashboard/sections/search-section/search-route-transition.ts

@@ -17,7 +17,12 @@ import {AnimationController} from '@ionic/angular/standalone';
 import {AnimationOptions} from '@ionic/angular/common/providers/nav-controller';
 
 /**
- *
+ * Creates the page transition used when opening the search from the search field
+ * on the home page: the search bar moves up into the header of the search page,
+ * which fades in on top while the home page content slides away. Going back plays
+ * the same animation in reverse.
+ * @param animationController Ionic animation controller used to build the animation
+ * @returns animation builder to pass to `[routerAnimation]`
  */
 export function homePageSearchTransition(animationController: AnimationController) {
   let scheduleTransform: WebKitCSSMatrix;
@@ -53,6 +58,9 @@ export function homePageSearchTransition(animationController: AnimationControlle
     const headerDelta = homeHeaderHeight - searchHeaderHeight;
 
     const enterTransition = animationController.create().fromTo('opacity', '0', '1').addElement(searchPage);
+    if (back) {
+      enterTransition.afterStyles({display: 'none'});
+    }
     const exitTransition = animationController.create().fromTo('opacity', '1', '1').addElement(homePage);
 
     const homePageSlide = animationController

frontend/app/src/app/modules/map/map-maximize-animation.ts

@@ -101,6 +101,7 @@ export function mapMaximizeAnimation(animationController: AnimationController):
     const exitTransition = animationController
       .create()
       .fromTo('opacity', '1', options.direction === 'back' ? '0' : '1')
+      .afterStyles(options.direction === 'back' ? {display: 'none'} : {})
       .addElement(options.leavingEl);
 
     rootTransition.addAnimation([enterTransition, exitTransition, mapEnterTransition, mapExitTransition]);

frontend/app/src/assets/i18n/de.json

@@ -372,9 +372,9 @@
     "view": {
       "today": "Heute"
     },
-    "recurring": "Wochen­ansicht",
+    "recurring": "Wochen\u00ADansicht",
     "calendar": "Kalender",
-    "single": "Einzel­termine",
+    "single": "Einzel\u00ADtermine",
     "addEventPage": {
       "TITLE": "Termine Hinzufügen",
       "PLACEHOLDER": "Termine",