@ionic/core 8.7.7-nightly.20251014 → 8.7.7-nightly.20251015

package/components/header.js

@@ -202,7 +202,7 @@ const handleHeaderFade = (scrollEl, baseEl, condenseHeader) => {
     });
 };
 
-const headerIosCss = "ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%;z-index:10}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}.header-ios ion-toolbar:last-of-type{--border-width:0 0 0.55px}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){.header-background{left:0;right:0;top:0;bottom:0;position:absolute;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}.header-translucent-ios ion-toolbar{--opacity:.8}.header-collapse-condense-inactive .header-background{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}}.header-ios.ion-no-border ion-toolbar:last-of-type{--border-width:0}.header-collapse-fade ion-toolbar{--opacity-scale:inherit}.header-collapse-condense{z-index:9}.header-collapse-condense ion-toolbar{position:-webkit-sticky;position:sticky;top:0}.header-collapse-condense ion-toolbar:first-of-type{padding-top:0px;z-index:1}.header-collapse-condense ion-toolbar{--background:var(--ion-background-color, #fff);z-index:0}.header-collapse-condense ion-toolbar:last-of-type{--border-width:0px}.header-collapse-condense ion-toolbar ion-searchbar{padding-top:0px;padding-bottom:13px}.header-collapse-main{--opacity-scale:1}.header-collapse-main ion-toolbar{--opacity-scale:inherit}.header-collapse-main ion-toolbar.in-toolbar ion-title,.header-collapse-main ion-toolbar.in-toolbar ion-buttons{-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out}.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-buttons.buttons-collapse{opacity:0;pointer-events:none}.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-buttons.buttons-collapse{visibility:hidden}ion-header.header-ios:not(.header-collapse-main):has(~ion-content ion-header.header-ios[collapse=condense],~ion-content ion-header.header-ios.header-collapse-condense){opacity:0}";
+const headerIosCss = "ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%;z-index:10}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}.header-ios ion-toolbar:last-of-type{--border-width:0 0 0.55px}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){.header-background{left:0;right:0;top:0;bottom:0;position:absolute;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}.header-translucent-ios ion-toolbar{--opacity:.8}.header-collapse-condense-inactive .header-background{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}}.header-ios.ion-no-border ion-toolbar:last-of-type{--border-width:0}.header-collapse-fade ion-toolbar{--opacity-scale:inherit}.header-collapse-fade.header-transitioning ion-toolbar{--background:transparent;--border-style:none}.header-collapse-condense{z-index:9}.header-collapse-condense ion-toolbar{position:-webkit-sticky;position:sticky;top:0}.header-collapse-condense ion-toolbar:first-of-type{padding-top:0px;z-index:1}.header-collapse-condense ion-toolbar{z-index:0}.header-collapse-condense ion-toolbar:last-of-type{--border-width:0px}.header-collapse-condense ion-toolbar ion-searchbar{padding-top:0px;padding-bottom:13px}.header-collapse-main{--opacity-scale:1}.header-collapse-main ion-toolbar{--opacity-scale:inherit}.header-collapse-main ion-toolbar.in-toolbar ion-title,.header-collapse-main ion-toolbar.in-toolbar ion-buttons{-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out}.header-collapse-condense ion-toolbar,.header-collapse-condense-inactive.header-transitioning:not(.header-collapse-condense) ion-toolbar{--background:var(--ion-background-color, #fff)}.header-collapse-condense-inactive.header-transitioning:not(.header-collapse-condense) ion-toolbar{--border-style:none;--opacity-scale:1}.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-buttons.buttons-collapse{opacity:0;pointer-events:none}.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-buttons.buttons-collapse{visibility:hidden}ion-header.header-ios:not(.header-collapse-main):has(~ion-content ion-header.header-ios[collapse=condense],~ion-content ion-header.header-ios.header-collapse-condense){opacity:0}";
 
 const headerMdCss = "ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%;z-index:10}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}.header-md{-webkit-box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)}.header-collapse-condense{display:none}.header-md.ion-no-border{-webkit-box-shadow:none;box-shadow:none}";
 

package/components/index2.js

@@ -123,11 +123,22 @@ const iosTransitionAnimation = () => import('./ios.transition.js');
 const mdTransitionAnimation = () => import('./md.transition.js');
 const focusController = createFocusController();
 // TODO(FW-2832): types
+/**
+ * Executes the main page transition.
+ * It also manages the lifecycle of header visibility (if any)
+ * to prevent visual flickering in iOS. The flickering only
+ * occurs for a condensed header that is placed above the content.
+ *
+ * @param opts Options for the transition.
+ * @returns A promise that resolves when the transition is complete.
+ */
 const transition = (opts) => {
     return new Promise((resolve, reject) => {
         writeTask(() => {
-            beforeTransition(opts);
-            runTransition(opts).then((result) => {
+            const transitioningInactiveHeader = getIosIonHeader(opts);
+            beforeTransition(opts, transitioningInactiveHeader);
+            runTransition(opts)
+                .then((result) => {
                 if (result.animation) {
                     result.animation.destroy();
                 }
@@ -136,15 +147,21 @@ const transition = (opts) => {
             }, (error) => {
                 afterTransition(opts);
                 reject(error);
+            })
+                .finally(() => {
+                // Ensure that the header is restored to its original state.
+                setHeaderTransitionClass(transitioningInactiveHeader, false);
             });
         });
     });
 };
-const beforeTransition = (opts) => {
+const beforeTransition = (opts, transitioningInactiveHeader) => {
     const enteringEl = opts.enteringEl;
     const leavingEl = opts.leavingEl;
     focusController.saveViewFocus(leavingEl);
     setZIndex(enteringEl, leavingEl, opts.direction);
+    // Prevent flickering of the header by adding a class.
+    setHeaderTransitionClass(transitioningInactiveHeader, true);
     if (opts.showGoBack) {
         enteringEl.classList.add('can-go-back');
     }
@@ -333,6 +350,39 @@ const setZIndex = (enteringEl, leavingEl, direction) => {
         leavingEl.style.zIndex = '100';
     }
 };
+/**
+ * Add a class to ensure that the header (if any)
+ * does not flicker during the transition. By adding the
+ * transitioning class, we ensure that the header has
+ * the necessary styles to prevent the following flickers:
+ * 1. When entering a page with a condensed header, the
+ * header should never be visible. However,
+ * it briefly renders the background color while
+ * the transition is occurring.
+ * 2. When leaving a page with a condensed header, the
+ * header has an opacity of 0 and the pages
+ * have a z-index which causes the entering page to
+ * briefly show it's content underneath the leaving page.
+ * 3. When entering a page or leaving a page with a fade
+ * header, the header should not have a background color.
+ * However, it briefly shows the background color while
+ * the transition is occurring.
+ *
+ * @param header The header element to modify.
+ * @param isTransitioning Whether the transition is occurring.
+ */
+const setHeaderTransitionClass = (header, isTransitioning) => {
+    if (!header) {
+        return;
+    }
+    const transitionClass = 'header-transitioning';
+    if (isTransitioning) {
+        header.classList.add(transitionClass);
+    }
+    else {
+        header.classList.remove(transitionClass);
+    }
+};
 const getIonPageElement = (element) => {
     if (element.classList.contains('ion-page')) {
         return element;
@@ -344,5 +394,26 @@ const getIonPageElement = (element) => {
     // idk, return the original element so at least something animates and we don't have a null pointer
     return element;
 };
+/**
+ * Retrieves the ion-header element from a page based on the
+ * direction of the transition.
+ *
+ * @param opts Options for the transition.
+ * @returns The ion-header element or null if not found or not in 'ios' mode.
+ */
+const getIosIonHeader = (opts) => {
+    const enteringEl = opts.enteringEl;
+    const leavingEl = opts.leavingEl;
+    const direction = opts.direction;
+    const mode = opts.mode;
+    if (mode !== 'ios') {
+        return null;
+    }
+    const element = direction === 'back' ? leavingEl : enteringEl;
+    if (!element) {
+        return null;
+    }
+    return element.querySelector('ion-header');
+};
 
 export { LIFECYCLE_WILL_ENTER as L, LIFECYCLE_DID_ENTER as a, LIFECYCLE_WILL_LEAVE as b, LIFECYCLE_DID_LEAVE as c, LIFECYCLE_WILL_UNLOAD as d, deepReady as e, getIonPageElement as g, lifecycle as l, setPageHidden as s, transition as t, waitForMount as w };

package/dist/cjs/{index-CD5Rjp23.js → index-094mMFB-.js}

@@ -120,15 +120,26 @@ const createFocusController = () => {
 };
 const LAST_FOCUS = 'ion-last-focus';
 
-const iosTransitionAnimation = () => Promise.resolve().then(function () { return require('./ios.transition-j9CclgEW.js'); });
-const mdTransitionAnimation = () => Promise.resolve().then(function () { return require('./md.transition-CwFyRSfv.js'); });
+const iosTransitionAnimation = () => Promise.resolve().then(function () { return require('./ios.transition-BOt_uW73.js'); });
+const mdTransitionAnimation = () => Promise.resolve().then(function () { return require('./md.transition-Dt968VXB.js'); });
 const focusController = createFocusController();
 // TODO(FW-2832): types
+/**
+ * Executes the main page transition.
+ * It also manages the lifecycle of header visibility (if any)
+ * to prevent visual flickering in iOS. The flickering only
+ * occurs for a condensed header that is placed above the content.
+ *
+ * @param opts Options for the transition.
+ * @returns A promise that resolves when the transition is complete.
+ */
 const transition = (opts) => {
     return new Promise((resolve, reject) => {
         index.writeTask(() => {
-            beforeTransition(opts);
-            runTransition(opts).then((result) => {
+            const transitioningInactiveHeader = getIosIonHeader(opts);
+            beforeTransition(opts, transitioningInactiveHeader);
+            runTransition(opts)
+                .then((result) => {
                 if (result.animation) {
                     result.animation.destroy();
                 }
@@ -137,15 +148,21 @@ const transition = (opts) => {
             }, (error) => {
                 afterTransition(opts);
                 reject(error);
+            })
+                .finally(() => {
+                // Ensure that the header is restored to its original state.
+                setHeaderTransitionClass(transitioningInactiveHeader, false);
             });
         });
     });
 };
-const beforeTransition = (opts) => {
+const beforeTransition = (opts, transitioningInactiveHeader) => {
     const enteringEl = opts.enteringEl;
     const leavingEl = opts.leavingEl;
     focusController.saveViewFocus(leavingEl);
     setZIndex(enteringEl, leavingEl, opts.direction);
+    // Prevent flickering of the header by adding a class.
+    setHeaderTransitionClass(transitioningInactiveHeader, true);
     if (opts.showGoBack) {
         enteringEl.classList.add('can-go-back');
     }
@@ -334,6 +351,39 @@ const setZIndex = (enteringEl, leavingEl, direction) => {
         leavingEl.style.zIndex = '100';
     }
 };
+/**
+ * Add a class to ensure that the header (if any)
+ * does not flicker during the transition. By adding the
+ * transitioning class, we ensure that the header has
+ * the necessary styles to prevent the following flickers:
+ * 1. When entering a page with a condensed header, the
+ * header should never be visible. However,
+ * it briefly renders the background color while
+ * the transition is occurring.
+ * 2. When leaving a page with a condensed header, the
+ * header has an opacity of 0 and the pages
+ * have a z-index which causes the entering page to
+ * briefly show it's content underneath the leaving page.
+ * 3. When entering a page or leaving a page with a fade
+ * header, the header should not have a background color.
+ * However, it briefly shows the background color while
+ * the transition is occurring.
+ *
+ * @param header The header element to modify.
+ * @param isTransitioning Whether the transition is occurring.
+ */
+const setHeaderTransitionClass = (header, isTransitioning) => {
+    if (!header) {
+        return;
+    }
+    const transitionClass = 'header-transitioning';
+    if (isTransitioning) {
+        header.classList.add(transitionClass);
+    }
+    else {
+        header.classList.remove(transitionClass);
+    }
+};
 const getIonPageElement = (element) => {
     if (element.classList.contains('ion-page')) {
         return element;
@@ -345,6 +395,27 @@ const getIonPageElement = (element) => {
     // idk, return the original element so at least something animates and we don't have a null pointer
     return element;
 };
+/**
+ * Retrieves the ion-header element from a page based on the
+ * direction of the transition.
+ *
+ * @param opts Options for the transition.
+ * @returns The ion-header element or null if not found or not in 'ios' mode.
+ */
+const getIosIonHeader = (opts) => {
+    const enteringEl = opts.enteringEl;
+    const leavingEl = opts.leavingEl;
+    const direction = opts.direction;
+    const mode = opts.mode;
+    if (mode !== 'ios') {
+        return null;
+    }
+    const element = direction === 'back' ? leavingEl : enteringEl;
+    if (!element) {
+        return null;
+    }
+    return element.querySelector('ion-header');
+};
 
 exports.LIFECYCLE_DID_ENTER = LIFECYCLE_DID_ENTER;
 exports.LIFECYCLE_DID_LEAVE = LIFECYCLE_DID_LEAVE;

package/dist/cjs/index.cjs.js

@@ -4,9 +4,9 @@
 'use strict';
 
 var animation = require('./animation-Bt3H9L1C.js');
-var index = require('./index-CD5Rjp23.js');
-var ios_transition = require('./ios.transition-j9CclgEW.js');
-var md_transition = require('./md.transition-CwFyRSfv.js');
+var index = require('./index-094mMFB-.js');
+var ios_transition = require('./ios.transition-BOt_uW73.js');
+var md_transition = require('./md.transition-Dt968VXB.js');
 var cubicBezier = require('./cubic-bezier-DAjy1V-e.js');
 var index$1 = require('./index-CAvQ7Tka.js');
 var ionicGlobal = require('./ionic-global-HMVqOFGO.js');

package/dist/cjs/ion-app_8.cjs.entry.js

@@ -14,7 +14,7 @@ var keyboardController = require('./keyboard-controller-GXBiBRKS.js');
 var cubicBezier = require('./cubic-bezier-DAjy1V-e.js');
 var frameworkDelegate = require('./framework-delegate-DMJRBuDi.js');
 var lockController = require('./lock-controller-aDB9wrEf.js');
-var index$2 = require('./index-CD5Rjp23.js');
+var index$2 = require('./index-094mMFB-.js');
 require('./index-DkNv4J_i.js');
 require('./keyboard-UuAS4D_9.js');
 require('./capacitor-DmA66EwP.js');
@@ -904,7 +904,7 @@ const handleHeaderFade = (scrollEl, baseEl, condenseHeader) => {
     });
 };
 
-const headerIosCss = "ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%;z-index:10}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}.header-ios ion-toolbar:last-of-type{--border-width:0 0 0.55px}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){.header-background{left:0;right:0;top:0;bottom:0;position:absolute;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}.header-translucent-ios ion-toolbar{--opacity:.8}.header-collapse-condense-inactive .header-background{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}}.header-ios.ion-no-border ion-toolbar:last-of-type{--border-width:0}.header-collapse-fade ion-toolbar{--opacity-scale:inherit}.header-collapse-condense{z-index:9}.header-collapse-condense ion-toolbar{position:-webkit-sticky;position:sticky;top:0}.header-collapse-condense ion-toolbar:first-of-type{padding-top:0px;z-index:1}.header-collapse-condense ion-toolbar{--background:var(--ion-background-color, #fff);z-index:0}.header-collapse-condense ion-toolbar:last-of-type{--border-width:0px}.header-collapse-condense ion-toolbar ion-searchbar{padding-top:0px;padding-bottom:13px}.header-collapse-main{--opacity-scale:1}.header-collapse-main ion-toolbar{--opacity-scale:inherit}.header-collapse-main ion-toolbar.in-toolbar ion-title,.header-collapse-main ion-toolbar.in-toolbar ion-buttons{-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out}.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-buttons.buttons-collapse{opacity:0;pointer-events:none}.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-buttons.buttons-collapse{visibility:hidden}ion-header.header-ios:not(.header-collapse-main):has(~ion-content ion-header.header-ios[collapse=condense],~ion-content ion-header.header-ios.header-collapse-condense){opacity:0}";
+const headerIosCss = "ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%;z-index:10}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}.header-ios ion-toolbar:last-of-type{--border-width:0 0 0.55px}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){.header-background{left:0;right:0;top:0;bottom:0;position:absolute;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}.header-translucent-ios ion-toolbar{--opacity:.8}.header-collapse-condense-inactive .header-background{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}}.header-ios.ion-no-border ion-toolbar:last-of-type{--border-width:0}.header-collapse-fade ion-toolbar{--opacity-scale:inherit}.header-collapse-fade.header-transitioning ion-toolbar{--background:transparent;--border-style:none}.header-collapse-condense{z-index:9}.header-collapse-condense ion-toolbar{position:-webkit-sticky;position:sticky;top:0}.header-collapse-condense ion-toolbar:first-of-type{padding-top:0px;z-index:1}.header-collapse-condense ion-toolbar{z-index:0}.header-collapse-condense ion-toolbar:last-of-type{--border-width:0px}.header-collapse-condense ion-toolbar ion-searchbar{padding-top:0px;padding-bottom:13px}.header-collapse-main{--opacity-scale:1}.header-collapse-main ion-toolbar{--opacity-scale:inherit}.header-collapse-main ion-toolbar.in-toolbar ion-title,.header-collapse-main ion-toolbar.in-toolbar ion-buttons{-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out}.header-collapse-condense ion-toolbar,.header-collapse-condense-inactive.header-transitioning:not(.header-collapse-condense) ion-toolbar{--background:var(--ion-background-color, #fff)}.header-collapse-condense-inactive.header-transitioning:not(.header-collapse-condense) ion-toolbar{--border-style:none;--opacity-scale:1}.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-buttons.buttons-collapse{opacity:0;pointer-events:none}.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-buttons.buttons-collapse{visibility:hidden}ion-header.header-ios:not(.header-collapse-main):has(~ion-content ion-header.header-ios[collapse=condense],~ion-content ion-header.header-ios.header-collapse-condense){opacity:0}";
 
 const headerMdCss = "ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%;z-index:10}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}.header-md{-webkit-box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)}.header-collapse-condense{display:none}.header-md.ion-no-border{-webkit-box-shadow:none;box-shadow:none}";
 

package/dist/cjs/ion-modal.cjs.entry.js

@@ -11,7 +11,7 @@ var lockController = require('./lock-controller-aDB9wrEf.js');
 var capacitor = require('./capacitor-DmA66EwP.js');
 var overlays = require('./overlays-DxIZwUXI.js');
 var theme = require('./theme-CeDs6Hcv.js');
-var index$4 = require('./index-CD5Rjp23.js');
+var index$4 = require('./index-094mMFB-.js');
 var ionicGlobal = require('./ionic-global-HMVqOFGO.js');
 var keyboard = require('./keyboard-hHzlEQpk.js');
 var animation = require('./animation-Bt3H9L1C.js');

package/dist/cjs/ion-nav_2.cjs.entry.js

@@ -6,7 +6,7 @@
 var index = require('./index-D6Wc6v08.js');
 var cubicBezier = require('./cubic-bezier-DAjy1V-e.js');
 var helpers = require('./helpers-DrTqNghc.js');
-var index$1 = require('./index-CD5Rjp23.js');
+var index$1 = require('./index-094mMFB-.js');
 var ionicGlobal = require('./ionic-global-HMVqOFGO.js');
 var frameworkDelegate = require('./framework-delegate-DMJRBuDi.js');
 

package/dist/cjs/ion-popover.cjs.entry.js

@@ -10,7 +10,7 @@ var helpers = require('./helpers-DrTqNghc.js');
 var lockController = require('./lock-controller-aDB9wrEf.js');
 var ionicGlobal = require('./ionic-global-HMVqOFGO.js');
 var theme = require('./theme-CeDs6Hcv.js');
-var index$1 = require('./index-CD5Rjp23.js');
+var index$1 = require('./index-094mMFB-.js');
 var animation = require('./animation-Bt3H9L1C.js');
 require('./index-DkNv4J_i.js');
 require('./hardware-back-button-VCK4V3mG.js');

package/dist/cjs/{ios.transition-j9CclgEW.js → ios.transition-BOt_uW73.js}

@@ -4,7 +4,7 @@
 'use strict';
 
 var animation = require('./animation-Bt3H9L1C.js');
-var index = require('./index-CD5Rjp23.js');
+var index = require('./index-094mMFB-.js');
 require('./index-D6Wc6v08.js');
 require('./index-DkNv4J_i.js');
 require('./helpers-DrTqNghc.js');

package/dist/cjs/{md.transition-CwFyRSfv.js → md.transition-Dt968VXB.js}

@@ -4,7 +4,7 @@
 'use strict';
 
 var animation = require('./animation-Bt3H9L1C.js');
-var index = require('./index-CD5Rjp23.js');
+var index = require('./index-094mMFB-.js');
 require('./index-D6Wc6v08.js');
 require('./index-DkNv4J_i.js');
 require('./helpers-DrTqNghc.js');

package/dist/collection/components/header/header.ios.css

@@ -152,6 +152,15 @@ ion-header ion-toolbar:first-of-type {
   --opacity-scale: inherit;
 }
 
+/**
+ * Override styles applied during the page transition to prevent
+ * header flickering.
+ */
+.header-collapse-fade.header-transitioning ion-toolbar {
+  --background: transparent;
+  --border-style: none;
+}
+
 .header-collapse-condense {
   z-index: 9;
 }
@@ -175,7 +184,6 @@ ion-header ion-toolbar:first-of-type {
  * since it needs to blend in with the header above it.
  */
 .header-collapse-condense ion-toolbar {
-  --background: var(--ion-background-color, #fff);
   z-index: 0;
 }
 
@@ -201,6 +209,24 @@ ion-header ion-toolbar:first-of-type {
   transition: all 0.2s ease-in-out;
 }
 
+/**
+ * Large title toolbar should just use the content background
+ * since it needs to blend in with the header above it.
+ */
+.header-collapse-condense ion-toolbar,
+.header-collapse-condense-inactive.header-transitioning:not(.header-collapse-condense) ion-toolbar {
+  --background: var(--ion-background-color, #fff);
+}
+
+/**
+ * Override styles applied during the page transition to prevent
+ * header flickering.
+ */
+.header-collapse-condense-inactive.header-transitioning:not(.header-collapse-condense) ion-toolbar {
+  --border-style: none;
+  --opacity-scale: 1;
+}
+
 .header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,
 .header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-buttons.buttons-collapse {
   opacity: 0;

package/dist/collection/utils/transition/index.js

@@ -10,11 +10,22 @@ const iosTransitionAnimation = () => import('./ios.transition');
 const mdTransitionAnimation = () => import('./md.transition');
 const focusController = createFocusController();
 // TODO(FW-2832): types
+/**
+ * Executes the main page transition.
+ * It also manages the lifecycle of header visibility (if any)
+ * to prevent visual flickering in iOS. The flickering only
+ * occurs for a condensed header that is placed above the content.
+ *
+ * @param opts Options for the transition.
+ * @returns A promise that resolves when the transition is complete.
+ */
 export const transition = (opts) => {
     return new Promise((resolve, reject) => {
         writeTask(() => {
-            beforeTransition(opts);
-            runTransition(opts).then((result) => {
+            const transitioningInactiveHeader = getIosIonHeader(opts);
+            beforeTransition(opts, transitioningInactiveHeader);
+            runTransition(opts)
+                .then((result) => {
                 if (result.animation) {
                     result.animation.destroy();
                 }
@@ -23,15 +34,21 @@ export const transition = (opts) => {
             }, (error) => {
                 afterTransition(opts);
                 reject(error);
+            })
+                .finally(() => {
+                // Ensure that the header is restored to its original state.
+                setHeaderTransitionClass(transitioningInactiveHeader, false);
             });
         });
     });
 };
-const beforeTransition = (opts) => {
+const beforeTransition = (opts, transitioningInactiveHeader) => {
     const enteringEl = opts.enteringEl;
     const leavingEl = opts.leavingEl;
     focusController.saveViewFocus(leavingEl);
     setZIndex(enteringEl, leavingEl, opts.direction);
+    // Prevent flickering of the header by adding a class.
+    setHeaderTransitionClass(transitioningInactiveHeader, true);
     if (opts.showGoBack) {
         enteringEl.classList.add('can-go-back');
     }
@@ -220,6 +237,39 @@ const setZIndex = (enteringEl, leavingEl, direction) => {
         leavingEl.style.zIndex = '100';
     }
 };
+/**
+ * Add a class to ensure that the header (if any)
+ * does not flicker during the transition. By adding the
+ * transitioning class, we ensure that the header has
+ * the necessary styles to prevent the following flickers:
+ * 1. When entering a page with a condensed header, the
+ * header should never be visible. However,
+ * it briefly renders the background color while
+ * the transition is occurring.
+ * 2. When leaving a page with a condensed header, the
+ * header has an opacity of 0 and the pages
+ * have a z-index which causes the entering page to
+ * briefly show it's content underneath the leaving page.
+ * 3. When entering a page or leaving a page with a fade
+ * header, the header should not have a background color.
+ * However, it briefly shows the background color while
+ * the transition is occurring.
+ *
+ * @param header The header element to modify.
+ * @param isTransitioning Whether the transition is occurring.
+ */
+const setHeaderTransitionClass = (header, isTransitioning) => {
+    if (!header) {
+        return;
+    }
+    const transitionClass = 'header-transitioning';
+    if (isTransitioning) {
+        header.classList.add(transitionClass);
+    }
+    else {
+        header.classList.remove(transitionClass);
+    }
+};
 export const getIonPageElement = (element) => {
     if (element.classList.contains('ion-page')) {
         return element;
@@ -231,3 +281,24 @@ export const getIonPageElement = (element) => {
     // idk, return the original element so at least something animates and we don't have a null pointer
     return element;
 };
+/**
+ * Retrieves the ion-header element from a page based on the
+ * direction of the transition.
+ *
+ * @param opts Options for the transition.
+ * @returns The ion-header element or null if not found or not in 'ios' mode.
+ */
+const getIosIonHeader = (opts) => {
+    const enteringEl = opts.enteringEl;
+    const leavingEl = opts.leavingEl;
+    const direction = opts.direction;
+    const mode = opts.mode;
+    if (mode !== 'ios') {
+        return null;
+    }
+    const element = direction === 'back' ? leavingEl : enteringEl;
+    if (!element) {
+        return null;
+    }
+    return element.querySelector('ion-header');
+};

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-10-14T06:11:22",
+  "timestamp": "2025-10-15T06:11:13",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.38.0",

package/dist/esm/{index-D6G2seR8.js → index-r2D9DEro.js}

@@ -118,15 +118,26 @@ const createFocusController = () => {
 };
 const LAST_FOCUS = 'ion-last-focus';
 
-const iosTransitionAnimation = () => import('./ios.transition-Bpq9ixwv.js');
-const mdTransitionAnimation = () => import('./md.transition-zOA0oanq.js');
+const iosTransitionAnimation = () => import('./ios.transition-BDzw0_Hm.js');
+const mdTransitionAnimation = () => import('./md.transition-BzDYi3qq.js');
 const focusController = createFocusController();
 // TODO(FW-2832): types
+/**
+ * Executes the main page transition.
+ * It also manages the lifecycle of header visibility (if any)
+ * to prevent visual flickering in iOS. The flickering only
+ * occurs for a condensed header that is placed above the content.
+ *
+ * @param opts Options for the transition.
+ * @returns A promise that resolves when the transition is complete.
+ */
 const transition = (opts) => {
     return new Promise((resolve, reject) => {
         writeTask(() => {
-            beforeTransition(opts);
-            runTransition(opts).then((result) => {
+            const transitioningInactiveHeader = getIosIonHeader(opts);
+            beforeTransition(opts, transitioningInactiveHeader);
+            runTransition(opts)
+                .then((result) => {
                 if (result.animation) {
                     result.animation.destroy();
                 }
@@ -135,15 +146,21 @@ const transition = (opts) => {
             }, (error) => {
                 afterTransition(opts);
                 reject(error);
+            })
+                .finally(() => {
+                // Ensure that the header is restored to its original state.
+                setHeaderTransitionClass(transitioningInactiveHeader, false);
             });
         });
     });
 };
-const beforeTransition = (opts) => {
+const beforeTransition = (opts, transitioningInactiveHeader) => {
     const enteringEl = opts.enteringEl;
     const leavingEl = opts.leavingEl;
     focusController.saveViewFocus(leavingEl);
     setZIndex(enteringEl, leavingEl, opts.direction);
+    // Prevent flickering of the header by adding a class.
+    setHeaderTransitionClass(transitioningInactiveHeader, true);
     if (opts.showGoBack) {
         enteringEl.classList.add('can-go-back');
     }
@@ -332,6 +349,39 @@ const setZIndex = (enteringEl, leavingEl, direction) => {
         leavingEl.style.zIndex = '100';
     }
 };
+/**
+ * Add a class to ensure that the header (if any)
+ * does not flicker during the transition. By adding the
+ * transitioning class, we ensure that the header has
+ * the necessary styles to prevent the following flickers:
+ * 1. When entering a page with a condensed header, the
+ * header should never be visible. However,
+ * it briefly renders the background color while
+ * the transition is occurring.
+ * 2. When leaving a page with a condensed header, the
+ * header has an opacity of 0 and the pages
+ * have a z-index which causes the entering page to
+ * briefly show it's content underneath the leaving page.
+ * 3. When entering a page or leaving a page with a fade
+ * header, the header should not have a background color.
+ * However, it briefly shows the background color while
+ * the transition is occurring.
+ *
+ * @param header The header element to modify.
+ * @param isTransitioning Whether the transition is occurring.
+ */
+const setHeaderTransitionClass = (header, isTransitioning) => {
+    if (!header) {
+        return;
+    }
+    const transitionClass = 'header-transitioning';
+    if (isTransitioning) {
+        header.classList.add(transitionClass);
+    }
+    else {
+        header.classList.remove(transitionClass);
+    }
+};
 const getIonPageElement = (element) => {
     if (element.classList.contains('ion-page')) {
         return element;
@@ -343,5 +393,26 @@ const getIonPageElement = (element) => {
     // idk, return the original element so at least something animates and we don't have a null pointer
     return element;
 };
+/**
+ * Retrieves the ion-header element from a page based on the
+ * direction of the transition.
+ *
+ * @param opts Options for the transition.
+ * @returns The ion-header element or null if not found or not in 'ios' mode.
+ */
+const getIosIonHeader = (opts) => {
+    const enteringEl = opts.enteringEl;
+    const leavingEl = opts.leavingEl;
+    const direction = opts.direction;
+    const mode = opts.mode;
+    if (mode !== 'ios') {
+        return null;
+    }
+    const element = direction === 'back' ? leavingEl : enteringEl;
+    if (!element) {
+        return null;
+    }
+    return element.querySelector('ion-header');
+};
 
 export { LIFECYCLE_WILL_ENTER as L, LIFECYCLE_DID_ENTER as a, LIFECYCLE_WILL_LEAVE as b, LIFECYCLE_DID_LEAVE as c, LIFECYCLE_WILL_UNLOAD as d, deepReady as e, getIonPageElement as g, lifecycle as l, setPageHidden as s, transition as t, waitForMount as w };

package/dist/esm/index.js

@@ -2,9 +2,9 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 export { c as createAnimation } from './animation-Dt8bGnA-.js';
-export { a as LIFECYCLE_DID_ENTER, c as LIFECYCLE_DID_LEAVE, L as LIFECYCLE_WILL_ENTER, b as LIFECYCLE_WILL_LEAVE, d as LIFECYCLE_WILL_UNLOAD, g as getIonPageElement } from './index-D6G2seR8.js';
-export { iosTransitionAnimation } from './ios.transition-Bpq9ixwv.js';
-export { mdTransitionAnimation } from './md.transition-zOA0oanq.js';
+export { a as LIFECYCLE_DID_ENTER, c as LIFECYCLE_DID_LEAVE, L as LIFECYCLE_WILL_ENTER, b as LIFECYCLE_WILL_LEAVE, d as LIFECYCLE_WILL_UNLOAD, g as getIonPageElement } from './index-r2D9DEro.js';
+export { iosTransitionAnimation } from './ios.transition-BDzw0_Hm.js';
+export { mdTransitionAnimation } from './md.transition-BzDYi3qq.js';
 export { g as getTimeGivenProgression } from './cubic-bezier-hHmYLOfE.js';
 export { createGesture } from './index-CfgBF1SE.js';
 export { g as getPlatforms, i as initialize, a as isPlatform } from './ionic-global-CDrldh-5.js';