fix: flickering in chrome when switching views

Closes #253

frontend/app/src/app/modules/menu/navigation/tabs-transition.ts

@@ -19,7 +19,10 @@ import type {AnimationOptions} from '@ionic/angular/common/providers/nav-control
 import {iosDuration, iosEasing, mdDuration, mdEasing} from 'src/app/animation/easings';
 
 /**
- *
+ * Creates the page transition used when switching between root pages via the
+ * tab bar or side menu: the old page fades out and reveals the new page beneath it.
+ * @param animationController Ionic animation controller used to build the animation
+ * @returns animation builder to pass to `NavController.setDirection`
  */
 export function tabsTransition(animationController: AnimationController): AnimationBuilder {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -29,11 +32,14 @@ export function tabsTransition(animationController: AnimationController): Animat
       .duration(options.duration ?? (options.mode === 'ios' ? iosDuration : mdDuration * 1.4))
       .easing(options.mode === 'ios' ? iosEasing : mdEasing);
 
-    const exitZIndex = animationController.create().fromTo('opacity', '1', '0').addElement(options.leavingEl);
+    const exitZIndex = animationController
+      .create()
+      .fromTo('opacity', '1', '0')
+      .addElement(options.leavingEl)
+      .afterStyles({display: 'none'});
     const contentEnter = animationController
       .create()
-      .fromTo('transform', 'scale(1.05)', 'scale(1)')
+      .fromTo('opacity', '1', '1')
-      .fromTo('opacity', '0', '1')
       .addElement(options.enteringEl);
 
     rootTransition.addAnimation([contentEnter, exitZIndex]);