fix: flickering in chrome when switching views

Related to #253

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]);