From e6e01381eb171c75c93729b9deabdabfe0063802 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 18 Oct 2019 10:08:42 -0400
Subject: [PATCH] fix(ios): hide leaving view after nav transition to avoid
 flicker (#19691)

fixes #19674
---
 core/src/utils/transition/index.ts          | 13 +++++++++++++
 core/src/utils/transition/ios.transition.ts |  9 ++++++++-
 core/src/utils/transition/md.transition.ts  | 15 +--------------
 3 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/core/src/utils/transition/index.ts b/core/src/utils/transition/index.ts
index 0b065a51629..dd7410b9018 100644
--- a/core/src/utils/transition/index.ts
+++ b/core/src/utils/transition/index.ts
@@ -223,6 +223,19 @@ const setZIndex = (
   }
 };
 
+export const getIonPageElement = (element: HTMLElement) => {
+  if (element.classList.contains('ion-page')) {
+    return element;
+  }
+
+  const ionPage = element.querySelector(':scope > .ion-page, :scope > ion-nav, :scope > ion-tabs');
+  if (ionPage) {
+    return ionPage;
+  }
+  // idk, return the original element so at least something animates and we don't have a null pointer
+  return element;
+};
+
 export interface TransitionOptions extends NavOptions {
   progressCallback?: ((ani: Animation | undefined) => void);
   baseEl: any;
diff --git a/core/src/utils/transition/ios.transition.ts b/core/src/utils/transition/ios.transition.ts
index db2406fa27f..77efce4e3f5 100644
--- a/core/src/utils/transition/ios.transition.ts
+++ b/core/src/utils/transition/ios.transition.ts
@@ -1,6 +1,6 @@
 import { Animation } from '../../interface';
 import { createAnimation } from '../animation/animation';
-import { TransitionOptions } from '../transition';
+import { TransitionOptions, getIonPageElement } from '../transition';
 
 const DURATION = 540;
 const addSafeArea = (val: number, side = 'top'): string => {
@@ -376,6 +376,13 @@ export const iosTransitionAnimation = (navEl: HTMLElement, opts: TransitionOptio
           .beforeClearStyles([OPACITY])
           .fromTo('transform', `translateX(${CENTER})`, (isRTL ? 'translateX(-100%)' : 'translateX(100%)'));
 
+        const leavingPage = getIonPageElement(leavingEl) as HTMLElement;
+        rootAnimation.afterAddWrite(() => {
+          if (rootAnimation.getDirection() === 'normal') {
+            leavingPage.style.setProperty('display', 'none');
+          }
+        });
+
       } else {
         // leaving content, forward direction
         leavingContent
diff --git a/core/src/utils/transition/md.transition.ts b/core/src/utils/transition/md.transition.ts
index 2f8303ed37e..b387bf0724d 100644
--- a/core/src/utils/transition/md.transition.ts
+++ b/core/src/utils/transition/md.transition.ts
@@ -1,6 +1,6 @@
 import { Animation } from '../../interface';
 import { createAnimation } from '../animation/animation';
-import { TransitionOptions } from '../transition';
+import { TransitionOptions, getIonPageElement } from '../transition';
 
 export const mdTransitionAnimation = (_: HTMLElement, opts: TransitionOptions): Animation => {
   const OFF_BOTTOM = '40px';
@@ -59,16 +59,3 @@ export const mdTransitionAnimation = (_: HTMLElement, opts: TransitionOptions):
 
   return rootTransition;
 };
-
-const getIonPageElement = (element: HTMLElement) => {
-  if (element.classList.contains('ion-page')) {
-    return element;
-  }
-
-  const ionPage = element.querySelector(':scope > .ion-page, :scope > ion-nav, :scope > ion-tabs');
-  if (ionPage) {
-    return ionPage;
-  }
-  // idk, return the original element so at least something animates and we don't have a null pointer
-  return element;
-};