From 7b07a1df22c8ac79504734ebf4ad41647dc96ead Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 21 Dec 2023 12:24:55 -0500 Subject: [PATCH 1/8] fix: add initial pass for fixing issue --- core/src/utils/transition/ios.transition.ts | 178 ++++++++++++-------- 1 file changed, 110 insertions(+), 68 deletions(-) diff --git a/core/src/utils/transition/ios.transition.ts b/core/src/utils/transition/ios.transition.ts index 107e305334f..4a09ae96ab0 100644 --- a/core/src/utils/transition/ios.transition.ts +++ b/core/src/utils/transition/ios.transition.ts @@ -75,8 +75,12 @@ const createLargeTitleTransition = ( const leavingLargeTitleBox = leavingLargeTitle.getBoundingClientRect(); const enteringBackButtonBox = enteringBackButton.getBoundingClientRect(); - const enteringBackButtonTextEl = shadow(enteringBackButton).querySelector('.button-text')!; - const enteringBackButtonTextBox = enteringBackButtonTextEl.getBoundingClientRect(); + const enteringBackButtonTextEl = shadow(enteringBackButton).querySelector('.button-text'); + /** + * If developers pass text="" to the back button then the + * text element will not be rendered. + */ + const enteringBackButtonTextBox = enteringBackButtonTextEl?.getBoundingClientRect(); const leavingLargeTitleTextEl = shadow(leavingLargeTitle).querySelector('.toolbar-title')!; const leavingLargeTitleTextBox = leavingLargeTitleTextEl.getBoundingClientRect(); @@ -88,6 +92,7 @@ const createLargeTitleTransition = ( leavingLargeTitle, leavingLargeTitleBox, leavingLargeTitleTextBox, + enteringBackButtonBox, enteringBackButtonTextEl, enteringBackButtonTextBox ); @@ -106,8 +111,12 @@ const createLargeTitleTransition = ( const enteringLargeTitleBox = enteringLargeTitle.getBoundingClientRect(); const leavingBackButtonBox = leavingBackButton.getBoundingClientRect(); - const leavingBackButtonTextEl = shadow(leavingBackButton).querySelector('.button-text')!; - const leavingBackButtonTextBox = leavingBackButtonTextEl.getBoundingClientRect(); + const leavingBackButtonTextEl = shadow(leavingBackButton).querySelector('.button-text'); + /** + * If developers pass text="" to the back button then the + * text element will not be rendered. + */ + const leavingBackButtonTextBox = leavingBackButtonTextEl?.getBoundingClientRect(); const enteringLargeTitleTextEl = shadow(enteringLargeTitle).querySelector('.toolbar-title')!; const enteringLargeTitleTextBox = enteringLargeTitleTextEl.getBoundingClientRect(); @@ -119,6 +128,7 @@ const createLargeTitleTransition = ( enteringLargeTitle, enteringLargeTitleBox, enteringLargeTitleTextBox, + leavingBackButtonBox, leavingBackButtonTextEl, leavingBackButtonTextBox ); @@ -158,31 +168,35 @@ const animateBackButton = ( const ICON_ORIGIN_X = rtl ? 'left' : 'right'; const CONTAINER_ORIGIN_X = rtl ? 'right' : 'left'; + let WIDTH_SCALE = 1; + let HEIGHT_SCALE = 1; - /** - * When the title and back button texts match - * then they should overlap during the page transition. - * If the texts do not match up then the back button text scale adjusts - * to not perfectly match the large title text otherwise the - * proportions will be incorrect. - * When the texts match we scale both the width and height to account for - * font weight differences between the title and back button. - */ - const doTitleAndButtonTextsMatch = backButtonTextEl.textContent?.trim() === largeTitleEl.textContent?.trim(); - - const WIDTH_SCALE = largeTitleTextBox.width / backButtonTextBox.width; - - /** - * We subtract an offset to account for slight sizing/padding - * differences between the title and the back button. - */ - const HEIGHT_SCALE = (largeTitleTextBox.height - LARGE_TITLE_SIZE_OFFSET) / backButtonTextBox.height; - - const TEXT_START_SCALE = doTitleAndButtonTextsMatch - ? `scale(${WIDTH_SCALE}, ${HEIGHT_SCALE})` - : `scale(${HEIGHT_SCALE})`; + let TEXT_START_SCALE = `scale(${HEIGHT_SCALE})`; const TEXT_END_SCALE = 'scale(1)'; + if (backButtonTextEl && backButtonTextBox) { + /** + * When the title and back button texts match + * then they should overlap during the page transition. + * If the texts do not match up then the back button text scale adjusts + * to not perfectly match the large title text otherwise the + * proportions will be incorrect. + * When the texts match we scale both the width and height to account for + * font weight differences between the title and back button. + */ + const doTitleAndButtonTextsMatch = backButtonTextEl.textContent?.trim() === largeTitleEl.textContent?.trim(); + WIDTH_SCALE = largeTitleTextBox.width / backButtonTextBox.width; + /** + * We subtract an offset to account for slight sizing/padding + * differences between the title and the back button. + */ + HEIGHT_SCALE = (largeTitleTextBox.height - LARGE_TITLE_SIZE_OFFSET) / backButtonTextBox.height; + + if (doTitleAndButtonTextsMatch) { + TEXT_START_SCALE = `scale(${WIDTH_SCALE}, ${HEIGHT_SCALE})`; + } + } + const backButtonIconEl = shadow(backButtonEl).querySelector('ion-icon')!; const backButtonIconBox = backButtonIconEl.getBoundingClientRect(); @@ -329,8 +343,9 @@ const animateLargeTitle = ( largeTitleEl: HTMLIonTitleElement, largeTitleBox: DOMRect, largeTitleTextBox: DOMRect, - backButtonTextEl: HTMLElement, - backButtonTextBox: DOMRect + backButtonBox: DOMRect, + backButtonTextEl: HTMLElement | null, + backButtonTextBox: DOMRect | undefined ) => { /** * The horizontal transform origin for the large title @@ -353,59 +368,86 @@ const animateLargeTitle = ( * title and the back button due to padding and font weight. */ const LARGE_TITLE_TRANSLATION_OFFSET = 8; + let END_TRANSLATE_X = rtl + ? `-${window.innerWidth - backButtonBox.right - LARGE_TITLE_TRANSLATION_OFFSET}px` + : `${backButtonBox.x + LARGE_TITLE_TRANSLATION_OFFSET}px`; /** - * The scaled title should (roughly) overlap the back button. - * This ensures that the back button and title overlap during - * the animation. Note that since both elements either fade in - * or fade out over the course of the animation, neither element - * will be fully visible on top of the other. As a result, the overlap - * does not need to be perfect, so approximate values are acceptable here. + * How much to scale the large title up/down by. */ - const END_TRANSLATE_X = rtl - ? `-${window.innerWidth - backButtonTextBox.right - LARGE_TITLE_TRANSLATION_OFFSET}px` - : `${backButtonTextBox.x - LARGE_TITLE_TRANSLATION_OFFSET}px`; + let HEIGHT_SCALE = 0.5; /** - * The top of the scaled large title - * should match with the top of the - * back button text element. - * We subtract 2px to account for the top padding - * on the large title element. + * The large title always starts full size. */ - const LARGE_TITLE_TOP_PADDING = 2; - const END_TRANSLATE_Y = `${backButtonTextBox.y - LARGE_TITLE_TOP_PADDING}px`; + const START_SCALE = 'scale(1)'; /** - * In the forward direction, the large title should start at its - * normal size and then scale down to be (roughly) the size of the - * back button on the other view. In the backward direction, the - * large title should start at (roughly) the size of the back button - * and then scale up to its original size. - * - * Note that since both elements either fade in - * or fade out over the course of the animation, neither element - * will be fully visible on top of the other. As a result, the overlap - * does not need to be perfect, so approximate values are acceptable here. + * By default, we don't worry about having + * the large title scaled to perfectly match + * the back button because we don't know if + * the back button's text matches the + * large title's text. */ + let END_SCALE = `scale(${HEIGHT_SCALE})`; /** - * When the title and back button texts match - * then they should overlap during the page transition. - * If the texts do not match up then the large title text scale adjusts - * to not perfectly match the back button text otherwise the - * proportions will be incorrect. - * When the texts match we scale both the width and height to account for - * font weight differences between the title and back button. + * If a developer passes text="" to the back button + * then the text element will not be rendered. */ - const doTitleAndButtonTextsMatch = backButtonTextEl.textContent?.trim() === largeTitleEl.textContent?.trim(); - - const WIDTH_SCALE = backButtonTextBox.width / largeTitleTextBox.width; - const HEIGHT_SCALE = backButtonTextBox.height / (largeTitleTextBox.height - LARGE_TITLE_SIZE_OFFSET); - - const START_SCALE = 'scale(1)'; + if (backButtonTextEl && backButtonTextBox) { + /** + * The scaled title should (roughly) overlap the back button. + * This ensures that the back button and title overlap during + * the animation. Note that since both elements either fade in + * or fade out over the course of the animation, neither element + * will be fully visible on top of the other. As a result, the overlap + * does not need to be perfect, so approximate values are acceptable here. + */ + END_TRANSLATE_X = rtl + ? `-${window.innerWidth - backButtonTextBox.right - LARGE_TITLE_TRANSLATION_OFFSET}px` + : `${backButtonTextBox.x - LARGE_TITLE_TRANSLATION_OFFSET}px`; + + /** + * In the forward direction, the large title should start at its + * normal size and then scale down to be (roughly) the size of the + * back button on the other view. In the backward direction, the + * large title should start at (roughly) the size of the back button + * and then scale up to its original size. + * + * Note that since both elements either fade in + * or fade out over the course of the animation, neither element + * will be fully visible on top of the other. As a result, the overlap + * does not need to be perfect, so approximate values are acceptable here. + */ + + /** + * When the title and back button texts match + * then they should overlap during the page transition. + * If the texts do not match up then the large title text scale adjusts + * to not perfectly match the back button text otherwise the + * proportions will be incorrect. + * When the texts match we scale both the width and height to account for + * font weight differences between the title and back button. + */ + const doTitleAndButtonTextsMatch = backButtonTextEl.textContent?.trim() === largeTitleEl.textContent?.trim(); + + const WIDTH_SCALE = backButtonTextBox.width / largeTitleTextBox.width; + HEIGHT_SCALE = backButtonTextBox.height / (largeTitleTextBox.height - LARGE_TITLE_SIZE_OFFSET); + + if (doTitleAndButtonTextsMatch) { + END_SCALE = `scale(${WIDTH_SCALE}, ${HEIGHT_SCALE})`; + } + } - const END_SCALE = doTitleAndButtonTextsMatch ? `scale(${WIDTH_SCALE}, ${HEIGHT_SCALE})` : `scale(${HEIGHT_SCALE})`; + /** + * The midpoints of the back button and the title + * should align such that the back button and + * title appear to be centered with each other. + */ + const backButtonMidPoint = backButtonBox.top + (backButtonBox.height / 2); + const titleMidPoint = (largeTitleBox.height * HEIGHT_SCALE) / 2; + const END_TRANSLATE_Y = `${backButtonMidPoint - titleMidPoint}px`; const BACKWARDS_KEYFRAMES = [ { offset: 0, opacity: 0, transform: `translate3d(${END_TRANSLATE_X}, ${END_TRANSLATE_Y}, 0) ${END_SCALE}` }, From 0959e84b390f4fcfc087cccdaab1ef3d88e3e43f Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 21 Dec 2023 12:24:58 -0500 Subject: [PATCH 2/8] test --- .../components/nav/test/routing/index.html | 21 +++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/core/src/components/nav/test/routing/index.html b/core/src/components/nav/test/routing/index.html index e822c830aed..601bb9590e8 100644 --- a/core/src/components/nav/test/routing/index.html +++ b/core/src/components/nav/test/routing/index.html @@ -1,5 +1,5 @@ - + Nav - Routing @@ -21,8 +21,12 @@ Root - -

Root

+ + + + Page Root + +
Go to Page One @@ -38,12 +42,17 @@

Root

- + Page One - + + + + Page One + +

Page One

Go to Page Two @@ -58,7 +67,7 @@

Page One

- + Page Two From 36550f4468b1232f5643146103ee8cb1ded5a360 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 11 Apr 2024 12:09:11 -0400 Subject: [PATCH 3/8] clean up comments --- core/src/utils/transition/ios.transition.ts | 41 ++++++++------------- 1 file changed, 16 insertions(+), 25 deletions(-) diff --git a/core/src/utils/transition/ios.transition.ts b/core/src/utils/transition/ios.transition.ts index 959c78dc177..fe14d6f8279 100644 --- a/core/src/utils/transition/ios.transition.ts +++ b/core/src/utils/transition/ios.transition.ts @@ -76,10 +76,8 @@ const createLargeTitleTransition = ( const enteringBackButtonBox = enteringBackButton.getBoundingClientRect(); const enteringBackButtonTextEl = shadow(enteringBackButton).querySelector('.button-text'); - /** - * If developers pass text="" to the back button then the - * text element will not be rendered. - */ + + // Text element not rendered if developers pass text="" to the back button const enteringBackButtonTextBox = enteringBackButtonTextEl?.getBoundingClientRect(); const leavingLargeTitleTextEl = shadow(leavingLargeTitle).querySelector('.toolbar-title')!; @@ -112,10 +110,8 @@ const createLargeTitleTransition = ( const leavingBackButtonBox = leavingBackButton.getBoundingClientRect(); const leavingBackButtonTextEl = shadow(leavingBackButton).querySelector('.button-text'); - /** - * If developers pass text="" to the back button then the - * text element will not be rendered. - */ + + // Text element not rendered if developers pass text="" to the back button const leavingBackButtonTextBox = leavingBackButtonTextEl?.getBoundingClientRect(); const enteringLargeTitleTextEl = shadow(enteringLargeTitle).querySelector('.toolbar-title')!; @@ -176,19 +172,17 @@ const animateBackButton = ( if (backButtonTextEl && backButtonTextBox) { /** - * When the title and back button texts match - * then they should overlap during the page transition. - * If the texts do not match up then the back button text scale adjusts - * to not perfectly match the large title text otherwise the - * proportions will be incorrect. - * When the texts match we scale both the width and height to account for - * font weight differences between the title and back button. + * When the title and back button texts match then they should overlap during the + * page transition. If the texts do not match up then the back button text scale + * adjusts to not perfectly match the large title text otherwise the proportions + * will be incorrect. When the texts match we scale both the width and height to + * account for font weight differences between the title and back button. */ const doTitleAndButtonTextsMatch = backButtonTextEl.textContent?.trim() === largeTitleEl.textContent?.trim(); WIDTH_SCALE = largeTitleTextBox.width / backButtonTextBox.width; /** - * We subtract an offset to account for slight sizing/padding - * differences between the title and the back button. + * Subtract an offset to account for slight sizing/padding differences between the + * title and the back button. */ HEIGHT_SCALE = (largeTitleTextBox.height - LARGE_TITLE_SIZE_OFFSET) / backButtonTextBox.height; @@ -383,11 +377,9 @@ const animateLargeTitle = ( const START_SCALE = 'scale(1)'; /** - * By default, we don't worry about having - * the large title scaled to perfectly match - * the back button because we don't know if - * the back button's text matches the - * large title's text. + * By default, we don't worry about having the large title scaled to perfectly + * match the back button because we don't know if the back button's text matches + * the large title's text. */ let END_SCALE = `scale(${HEIGHT_SCALE})`; @@ -441,9 +433,8 @@ const animateLargeTitle = ( } /** - * The midpoints of the back button and the title - * should align such that the back button and - * title appear to be centered with each other. + * The midpoints of the back button and the title should align such that the back + * button and title appear to be centered with each other. */ const backButtonMidPoint = backButtonBox.top + (backButtonBox.height / 2); const titleMidPoint = (largeTitleBox.height * HEIGHT_SCALE) / 2; From 9fff55c79987b7003eff523bcd6d46a8d08834e5 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 11 Apr 2024 12:11:52 -0400 Subject: [PATCH 4/8] clean up comments --- core/src/utils/transition/ios.transition.ts | 43 ++++++++------------- 1 file changed, 17 insertions(+), 26 deletions(-) diff --git a/core/src/utils/transition/ios.transition.ts b/core/src/utils/transition/ios.transition.ts index fe14d6f8279..25c91fb351b 100644 --- a/core/src/utils/transition/ios.transition.ts +++ b/core/src/utils/transition/ios.transition.ts @@ -383,17 +383,13 @@ const animateLargeTitle = ( */ let END_SCALE = `scale(${HEIGHT_SCALE})`; - /** - * If a developer passes text="" to the back button - * then the text element will not be rendered. - */ + // Text element not rendered if developers pass text="" to the back button if (backButtonTextEl && backButtonTextBox) { /** - * The scaled title should (roughly) overlap the back button. - * This ensures that the back button and title overlap during - * the animation. Note that since both elements either fade in - * or fade out over the course of the animation, neither element - * will be fully visible on top of the other. As a result, the overlap + * The scaled title should (roughly) overlap the back button. This ensures that + * the back button and title overlap during the animation. Note that since both + * elements either fade in or fade out over the course of the animation, neither + * element will be fully visible on top of the other. As a result, the overlap * does not need to be perfect, so approximate values are acceptable here. */ END_TRANSLATE_X = rtl @@ -401,26 +397,21 @@ const animateLargeTitle = ( : `${backButtonTextBox.x - LARGE_TITLE_TRANSLATION_OFFSET}px`; /** - * In the forward direction, the large title should start at its - * normal size and then scale down to be (roughly) the size of the - * back button on the other view. In the backward direction, the - * large title should start at (roughly) the size of the back button - * and then scale up to its original size. - * - * Note that since both elements either fade in - * or fade out over the course of the animation, neither element - * will be fully visible on top of the other. As a result, the overlap - * does not need to be perfect, so approximate values are acceptable here. + * In the forward direction, the large title should start at its normal size and + * then scale down to be (roughly) the size of the back button on the other view. + * In the backward direction, the large title should start at (roughly) the size + * of the back button and then scale up to its original size. + * Note that since both elements either fade in or fade out over the course of the + * animation, neither element will be fully visible on top of the other. As a result, + * the overlap does not need to be perfect, so approximate values are acceptable here. */ /** - * When the title and back button texts match - * then they should overlap during the page transition. - * If the texts do not match up then the large title text scale adjusts - * to not perfectly match the back button text otherwise the - * proportions will be incorrect. - * When the texts match we scale both the width and height to account for - * font weight differences between the title and back button. + * When the title and back button texts match then they should overlap during the + * page transition. If the texts do not match up then the large title text scale + * adjusts to not perfectly match the back button text otherwise the proportions + * will be incorrect. When the texts match we scale both the width and height to + * account for font weight differences between the title and back button. */ const doTitleAndButtonTextsMatch = backButtonTextEl.textContent?.trim() === largeTitleEl.textContent?.trim(); From d02271c51ee76025fe5bcc8423b8bd74a2532132 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 11 Apr 2024 12:32:16 -0400 Subject: [PATCH 5/8] fix: back button animation runs when only icon visible, also fix types --- core/src/utils/transition/ios.transition.ts | 27 ++++++++++++--------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/core/src/utils/transition/ios.transition.ts b/core/src/utils/transition/ios.transition.ts index 25c91fb351b..a543db4dade 100644 --- a/core/src/utils/transition/ios.transition.ts +++ b/core/src/utils/transition/ios.transition.ts @@ -153,8 +153,8 @@ const animateBackButton = ( backDirection: boolean, backButtonEl: HTMLIonBackButtonElement, backButtonBox: DOMRect, - backButtonTextEl: HTMLElement, - backButtonTextBox: DOMRect, + backButtonTextEl: HTMLElement | null, + backButtonTextBox: DOMRect | undefined, largeTitleEl: HTMLIonTitleElement, largeTitleTextBox: DOMRect ) => { @@ -300,12 +300,11 @@ const animateBackButton = ( top: '0px', [CONTAINER_ORIGIN_X]: '0px', }) - .keyframes(CONTAINER_KEYFRAMES); - - enteringBackButtonTextAnimation - .beforeStyles({ - 'transform-origin': `${TEXT_ORIGIN_X} top`, - }) + /** + * The write hooks must be set on this animation as it is guaranteed to run. Other + * animations such as the back button text animation will not run if the back button + * has no visible text. + */ .beforeAddWrite(() => { backButtonEl.style.setProperty('display', 'none'); clonedBackButtonEl.style.setProperty(TEXT_ORIGIN_X, BACK_BUTTON_START_OFFSET); @@ -315,6 +314,12 @@ const animateBackButton = ( clonedBackButtonEl.style.setProperty('display', 'none'); clonedBackButtonEl.style.removeProperty(TEXT_ORIGIN_X); }) + .keyframes(CONTAINER_KEYFRAMES); + + enteringBackButtonTextAnimation + .beforeStyles({ + 'transform-origin': `${TEXT_ORIGIN_X} top`, + }) .keyframes(TEXT_KEYFRAMES); enteringBackButtonIconAnimation @@ -363,8 +368,8 @@ const animateLargeTitle = ( */ const LARGE_TITLE_TRANSLATION_OFFSET = 8; let END_TRANSLATE_X = rtl - ? `-${window.innerWidth - backButtonBox.right - LARGE_TITLE_TRANSLATION_OFFSET}px` - : `${backButtonBox.x + LARGE_TITLE_TRANSLATION_OFFSET}px`; + ? `-${window.innerWidth - backButtonBox.right - LARGE_TITLE_TRANSLATION_OFFSET}px` + : `${backButtonBox.x + LARGE_TITLE_TRANSLATION_OFFSET}px`; /** * How much to scale the large title up/down by. @@ -427,7 +432,7 @@ const animateLargeTitle = ( * The midpoints of the back button and the title should align such that the back * button and title appear to be centered with each other. */ - const backButtonMidPoint = backButtonBox.top + (backButtonBox.height / 2); + const backButtonMidPoint = backButtonBox.top + backButtonBox.height / 2; const titleMidPoint = (largeTitleBox.height * HEIGHT_SCALE) / 2; const END_TRANSLATE_Y = `${backButtonMidPoint - titleMidPoint}px`; From ecf00d834caba68d5b74b23d808d3ce87c5a7f01 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 16 Apr 2024 11:30:39 -0400 Subject: [PATCH 6/8] fix: update scale correctly --- core/src/utils/transition/ios.transition.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/core/src/utils/transition/ios.transition.ts b/core/src/utils/transition/ios.transition.ts index a543db4dade..c5bc23dbc1d 100644 --- a/core/src/utils/transition/ios.transition.ts +++ b/core/src/utils/transition/ios.transition.ts @@ -186,9 +186,11 @@ const animateBackButton = ( */ HEIGHT_SCALE = (largeTitleTextBox.height - LARGE_TITLE_SIZE_OFFSET) / backButtonTextBox.height; - if (doTitleAndButtonTextsMatch) { - TEXT_START_SCALE = `scale(${WIDTH_SCALE}, ${HEIGHT_SCALE})`; - } + /** + * Even though we set TEXT_START_SCALE to HEIGHT_SCALE above, we potentially need + * to re-compute this here since the HEIGHT_SCALE may have changed. + */ + TEXT_START_SCALE = doTitleAndButtonTextsMatch ? `scale(${WIDTH_SCALE}, ${HEIGHT_SCALE})` : `scale(${HEIGHT_SCALE})`; } const backButtonIconEl = shadow(backButtonEl).querySelector('ion-icon')!; From 589832e7678a0ec20b5c3daefb1bcc0eccd4f5ec Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 16 Apr 2024 11:31:32 -0400 Subject: [PATCH 7/8] revert test --- .../components/nav/test/routing/index.html | 21 ++++++------------- 1 file changed, 6 insertions(+), 15 deletions(-) diff --git a/core/src/components/nav/test/routing/index.html b/core/src/components/nav/test/routing/index.html index 601bb9590e8..e822c830aed 100644 --- a/core/src/components/nav/test/routing/index.html +++ b/core/src/components/nav/test/routing/index.html @@ -1,5 +1,5 @@ - + Nav - Routing @@ -21,12 +21,8 @@ Root - - - - Page Root - - + +

Root

Go to Page One @@ -42,17 +38,12 @@ - + Page One - - - - Page One - - +

Page One

Go to Page Two @@ -67,7 +58,7 @@

Page One

- + Page Two From 8cabf9853cacc4402c90e44166584e803f4afab8 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 16 Apr 2024 11:41:32 -0400 Subject: [PATCH 8/8] fix: account for large title scale when using font scaling --- core/src/utils/transition/ios.transition.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/core/src/utils/transition/ios.transition.ts b/core/src/utils/transition/ios.transition.ts index c5bc23dbc1d..4e71e32a40d 100644 --- a/core/src/utils/transition/ios.transition.ts +++ b/core/src/utils/transition/ios.transition.ts @@ -425,9 +425,11 @@ const animateLargeTitle = ( const WIDTH_SCALE = backButtonTextBox.width / largeTitleTextBox.width; HEIGHT_SCALE = backButtonTextBox.height / (largeTitleTextBox.height - LARGE_TITLE_SIZE_OFFSET); - if (doTitleAndButtonTextsMatch) { - END_SCALE = `scale(${WIDTH_SCALE}, ${HEIGHT_SCALE})`; - } + /** + * Even though we set TEXT_START_SCALE to HEIGHT_SCALE above, we potentially need + * to re-compute this here since the HEIGHT_SCALE may have changed. + */ + END_SCALE = doTitleAndButtonTextsMatch ? `scale(${WIDTH_SCALE}, ${HEIGHT_SCALE})` : `scale(${HEIGHT_SCALE})`; } /**