fix(header): fix collapsing iOS header when using with split pane (#19480)

fixes #19541

Author: liamdebeasi

core/src/components/header/header.utils.ts

@@ -88,7 +88,9 @@ export const handleToolbarIntersection = (ev: any, mainHeaderIndex: HeaderIndex,
     const rootArea = event.rootBounds.width * event.rootBounds.height;
 
     const isPageHidden = intersectionArea === 0 && rootArea === 0;
-    const isPageTransitioning = intersectionArea > 0 && (intersection.left !== event.rootBounds.left || intersection.right !== event.rootBounds.right);
+    const leftDiff = Math.abs(intersection.left - event.boundingClientRect.left);
+    const rightDiff = Math.abs(intersection.right - event.boundingClientRect.right);
+    const isPageTransitioning = intersectionArea > 0 && (leftDiff >= 5 || rightDiff >= 5);
 
     if (isPageHidden || isPageTransitioning) {
       return;

core/src/utils/transition/ios.transition.ts

@@ -61,13 +61,15 @@ const createLargeTitleTransition = (rootAnimation: IonicAnimation, rtl: boolean,
 };
 
 const animateBackButton = (rootAnimation: IonicAnimation, rtl: boolean, backDirection: boolean, backButtonEl: any) => {
+  const backButtonBounds = backButtonEl.getBoundingClientRect();
+  const BACK_BUTTON_START_OFFSET = (rtl) ? `calc(100% - ${backButtonBounds.right + 4}px)` : `${backButtonBounds.left - 4}px`;
   const START_TEXT_TRANSLATE = (rtl) ? '7px' : '-7px';
   const END_TEXT_TRANSLATE = (rtl) ? '-4px' : '4px';
 
   const ICON_TRANSLATE = (rtl) ? '-4px' : '4px';
 
-  const TEXT_TRANSFORM_ORIGIN_X = (rtl) ? 'right' : 'left';
-  const ICON_TRANSFORM_ORIGIN_X = (rtl) ? 'left' : 'right';
+  const TEXT_ORIGIN_X = (rtl) ? 'right' : 'left';
+  const ICON_ORIGIN_X = (rtl) ? 'left' : 'right';
 
   const FORWARD_TEXT_KEYFRAMES = [
     { offset: 0, opacity: 0, transform: `translate(${START_TEXT_TRANSLATE}, ${addSafeArea(8)}) scale(2.1)` },
@@ -113,29 +115,33 @@ const animateBackButton = (rootAnimation: IonicAnimation, rtl: boolean, backDire
 
   enteringBackButtonTextAnimation
     .beforeStyles({
-      'transform-origin': `${TEXT_TRANSFORM_ORIGIN_X} center`
+      'transform-origin': `${TEXT_ORIGIN_X} center`
     })
     .beforeAddWrite(() => {
       backButtonEl.style.setProperty('display', 'none');
+      clonedBackButtonEl.style.setProperty(TEXT_ORIGIN_X, BACK_BUTTON_START_OFFSET);
     })
     .afterAddWrite(() => {
       backButtonEl.style.setProperty('display', '');
       clonedBackButtonEl.style.setProperty('display', 'none');
+      clonedBackButtonEl.style.removeProperty(TEXT_ORIGIN_X);
     })
     .keyframes(TEXT_KEYFRAMES);
 
   enteringBackButtonIconAnimation
     .beforeStyles({
-      'transform-origin': `${ICON_TRANSFORM_ORIGIN_X} center`
+      'transform-origin': `${ICON_ORIGIN_X} center`
     })
     .keyframes(ICON_KEYFRAMES);
 
   rootAnimation.addAnimation([enteringBackButtonTextAnimation, enteringBackButtonIconAnimation]);
 };
 
 const animateLargeTitle = (rootAnimation: IonicAnimation, rtl: boolean, backDirection: boolean, largeTitleEl: any) => {
+  const largeTitleBounds = largeTitleEl.getBoundingClientRect();
+  const TITLE_START_OFFSET = (rtl) ? `calc(100% - ${largeTitleBounds.right}px)` : `${largeTitleBounds.left}px`;
   const START_TRANSLATE = (rtl) ? '-18px' : '18px';
-  const TRANSFORM_ORIGIN_X = (rtl) ? 'right' : 'left';
+  const ORIGIN_X = (rtl) ? 'right' : 'left';
 
   const BACKWARDS_KEYFRAMES = [
     { offset: 0, opacity: 0, transform: `translate(${START_TRANSLATE}, ${addSafeArea(0)}) scale(0.49)` },
@@ -160,10 +166,11 @@ const animateLargeTitle = (rootAnimation: IonicAnimation, rtl: boolean, backDire
 
   clonedLargeTitleAnimation
     .beforeStyles({
-      'transform-origin': `${TRANSFORM_ORIGIN_X} center`,
+      'transform-origin': `${ORIGIN_X} center`,
       'height': '46px',
       'display': '',
-      'position': 'relative'
+      'position': 'relative',
+      [ORIGIN_X]: TITLE_START_OFFSET
     })
     .beforeAddWrite(() => {
       largeTitleEl.style.setProperty('display', 'none');