@ionic/core 8.8.16-dev.11784841344.1aa1a41c → 8.8.16-dev.11784914346.10d0804c

package/dist/collection/components/alert/alert.md.css

@@ -155,7 +155,8 @@
 
 .select-option-start > ion-icon,
 .select-option-end > ion-icon {
-  font-size: 24px;
+  width: 24px;
+  height: 24px;
 }
 
 .select-option-start > ion-img,

package/dist/collection/components/avatar/avatar.ionic.css

@@ -255,27 +255,33 @@
 }
 
 :host(.avatar-xxsmall) ::slotted(ion-icon) {
-  font-size: var(--token-font-size-300, 0.75rem);
+  width: var(--token-scale-300, 12px);
+  height: var(--token-scale-300, 12px);
 }
 
 :host(.avatar-xsmall) ::slotted(ion-icon) {
-  font-size: var(--token-font-size-400, 1rem);
+  width: var(--token-scale-400, 16px);
+  height: var(--token-scale-400, 16px);
 }
 
 :host(.avatar-small) ::slotted(ion-icon) {
-  font-size: var(--token-font-size-500, 1.25rem);
+  width: var(--token-scale-500, 20px);
+  height: var(--token-scale-500, 20px);
 }
 
 :host(.avatar-medium) ::slotted(ion-icon) {
-  font-size: var(--token-font-size-600, 1.5rem);
+  width: var(--token-scale-600, 24px);
+  height: var(--token-scale-600, 24px);
 }
 
 :host(.avatar-large) ::slotted(ion-icon) {
-  font-size: var(--token-font-size-700, 1.75rem);
+  width: var(--token-scale-700, 28px);
+  height: var(--token-scale-700, 28px);
 }
 
 :host(.avatar-xlarge) ::slotted(ion-icon) {
-  font-size: var(--token-font-size-800, 2rem);
+  width: var(--token-scale-800, 32px);
+  height: var(--token-scale-800, 32px);
 }
 
 :host ::slotted(ion-badge.badge-vertical-top:empty) {

package/dist/collection/components/badge/badge.ionic.css

@@ -188,7 +188,8 @@
 }
 
 :host(.badge-small) ::slotted(ion-icon) {
-  font-size: var(--token-font-size-300, 0.75rem);
+  width: var(--token-scale-300, 12px);
+  height: var(--token-scale-300, 12px);
 }
 
 /* Medium Badge */
@@ -209,7 +210,8 @@
 
 :host(.badge-medium) ::slotted(ion-icon),
 :host(.badge-large) ::slotted(ion-icon) {
-  font-size: var(--token-font-size-400, 1rem);
+  width: var(--token-scale-400, 16px);
+  height: var(--token-scale-400, 16px);
 }
 
 :host(:empty) {
@@ -268,5 +270,6 @@
   height: var(--token-scale-400, 16px);
 }
 :host(:not(:empty).in-button) ::slotted(ion-icon) {
-  font-size: var(--token-font-size-300, 0.75rem);
+  width: var(--token-scale-300, 12px);
+  height: var(--token-scale-300, 12px);
 }

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

@@ -201,7 +201,8 @@
   line-height: 20px;
 }
 :host(:not(:empty).in-button) ::slotted(ion-icon) {
-  font-size: 12px;
+  width: 12px;
+  height: 12px;
 }
 
 /**
@@ -285,8 +286,9 @@
 :host([vertical].in-tab-button) ::slotted(ion-icon) {
   top: 50%;
   position: absolute;
+  width: 12px;
+  height: 12px;
   transform: translate(-50%, -50%);
-  font-size: 12px;
 }
 :host([vertical].in-tab-button) ::slotted(ion-icon) {
   inset-inline-start: 50%;

package/dist/collection/components/badge/badge.md.css

@@ -201,7 +201,8 @@
   line-height: 20px;
 }
 :host(:not(:empty).in-button) ::slotted(ion-icon) {
-  font-size: 12px;
+  width: 12px;
+  height: 12px;
 }
 
 /**

package/dist/collection/components/button/button.ionic.css

@@ -462,13 +462,15 @@ ion-ripple-effect {
 :host(.button-medium) ::slotted(ion-icon[slot=start]),
 :host(.button-medium) ::slotted(ion-icon[slot=end]),
 :host(.button-medium) ::slotted(ion-icon[slot=icon-only]) {
-  font-size: var(--token-font-size-500, 1.25rem);
+  width: var(--token-scale-500, 20px);
+  height: var(--token-scale-500, 20px);
 }
 
 :host(.button-large) ::slotted(ion-icon[slot=start]),
 :host(.button-large) ::slotted(ion-icon[slot=end]),
 :host(.button-large) ::slotted(ion-icon[slot=icon-only]) {
-  font-size: var(--token-font-size-600, 1.5rem);
+  width: var(--token-scale-600, 24px);
+  height: var(--token-scale-600, 24px);
 }
 
 :host(.button-has-icon-only) {

package/dist/collection/components/buttons/buttons.ionic.css

@@ -93,5 +93,5 @@
 }
 
 ::slotted(*) ion-icon[slot=icon-only] {
-  font-size: var(--token-font-size-500, 1.25rem);
+  font-size: var(--token-font-size-600, 1.5rem);
 }

package/dist/collection/components/content/content.css

@@ -281,4 +281,43 @@
    * still allow the fixed content to appear under the scroll content if specified.
    */
   transform: translateZ(0);
+}
+
+:host(.content-header-hide-scroll-partner:not(.content-fullscreen)) .inner-scroll {
+  transition: transform 300ms cubic-bezier(0, 0, 0.2, 1), height 300ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+:host(.content-header-hide-scroll-partner:not(.content-fullscreen).content-header-hide-scroll-hidden) .inner-scroll {
+  height: calc(100% + var(--internal-header-hide-height, 0px));
+  transform: translateY(calc(-1 * var(--internal-header-hide-height, 0px)));
+  transition: transform 200ms cubic-bezier(0.4, 0, 1, 1), height 200ms cubic-bezier(0.4, 0, 1, 1);
+}
+
+:host(.content-footer-hide-scroll-partner:not(.content-fullscreen)) .inner-scroll {
+  transition: height 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+:host(.content-footer-hide-scroll-partner:not(.content-fullscreen).content-footer-hide-scroll-hidden) .inner-scroll {
+  height: calc(100% + var(--internal-footer-hide-height, 0px));
+  transition: height 350ms cubic-bezier(0.4, 0, 1, 1);
+}
+
+:host(.content-tab-bar-hide-scroll-partner:not(.content-fullscreen)) .inner-scroll {
+  transition: height 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+:host(.content-tab-bar-hide-scroll-partner:not(.content-fullscreen).content-tab-bar-hide-scroll-hidden) .inner-scroll {
+  height: calc(100% + var(--internal-tab-bar-hide-height, 0px));
+  transition: height 350ms cubic-bezier(0.4, 0, 1, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host(.content-header-hide-scroll-partner:not(.content-fullscreen)) .inner-scroll,
+  :host(.content-header-hide-scroll-partner:not(.content-fullscreen).content-header-hide-scroll-hidden) .inner-scroll,
+  :host(.content-footer-hide-scroll-partner:not(.content-fullscreen)) .inner-scroll,
+  :host(.content-footer-hide-scroll-partner:not(.content-fullscreen).content-footer-hide-scroll-hidden) .inner-scroll,
+  :host(.content-tab-bar-hide-scroll-partner:not(.content-fullscreen)) .inner-scroll,
+  :host(.content-tab-bar-hide-scroll-partner:not(.content-fullscreen).content-tab-bar-hide-scroll-hidden) .inner-scroll {
+    transition: none;
+  }
 }

package/dist/collection/components/footer/footer-interface.js

@@ -0,0 +1 @@
+export {};

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

@@ -71,6 +71,25 @@ ion-footer.footer-toolbar-padding ion-toolbar:last-of-type {
   padding-bottom: var(--ion-safe-area-bottom, 0);
 }
 
+.footer-collapse-fade ion-toolbar {
+  --opacity-scale: inherit;
+}
+
+ion-footer.footer-scroll-effect-hide {
+  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+ion-footer.footer-scroll-effect-hide.footer-scroll-hidden {
+  transform: translateY(100%);
+  transition: transform 350ms cubic-bezier(0.4, 0, 1, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ion-footer.footer-scroll-effect-hide,
+  ion-footer.footer-scroll-effect-hide.footer-scroll-hidden {
+    transition: none;
+  }
+}
 /**
  * Convert a pixels given value into rem
  * 
@@ -151,8 +170,4 @@ ion-footer.footer-toolbar-padding ion-toolbar:last-of-type {
 }
 .footer-ios.ion-no-border ion-toolbar:first-of-type {
   --border-width: 0;
-}
-
-.footer-collapse-fade ion-toolbar {
-  --opacity-scale: inherit;
 }

package/dist/collection/components/footer/footer.js

@@ -4,6 +4,8 @@
 import { Host, h } from "@stencil/core";
 import { findIonContent, getScrollElement, printIonContentErrorMsg } from "../../utils/content/index";
 import { createKeyboardController } from "../../utils/keyboard/keyboard-controller";
+import { printIonWarning } from "../../utils/logging/index";
+import { createScrollHideController } from "../../utils/scroll-hide-controller";
 import { config } from "../../global/config";
 import { getIonTheme } from "../../global/ionic-global";
 import { handleFooterFade } from "./footer.utils";
@@ -15,6 +17,9 @@ export class Footer {
     constructor() {
         this.keyboardCtrl = null;
         this.keyboardCtrlPromise = null;
+        this.scrollHideCtrlPromise = null;
+        this.hasWarnedCollapse = false;
+        this.fadeSetupId = 0;
         this.keyboardVisible = false;
         /**
          * If `true`, the footer will be translucent.
@@ -25,27 +30,66 @@ export class Footer {
          * attribute needs to be set on the content.
          */
         this.translucent = false;
-        this.checkCollapsibleFooter = () => {
-            const theme = getIonTheme(this);
-            if (theme !== 'ios') {
+        this.checkCollapsibleFooter = async () => {
+            const { scrollEffect, collapse } = this;
+            if (collapse !== undefined && scrollEffect === undefined && !this.hasWarnedCollapse) {
+                this.hasWarnedCollapse = true;
+                printIonWarning(`[ion-footer] - The \`collapse\` property is deprecated. Use \`scrollEffect\` instead.\nExample: <ion-footer scroll-effect="${collapse}">`, this.el);
+            }
+            const effect = scrollEffect !== null && scrollEffect !== void 0 ? scrollEffect : collapse;
+            // Skip teardown/rebuild if the effect hasn't changed.
+            // This prevents keyboard toggles (which trigger re-renders via
+            // @State keyboardVisible) from destroying the scroll controller
+            // and resetting isHidden.
+            if (effect === this.activeEffect) {
                 return;
             }
-            const { collapse } = this;
-            const hasFade = collapse === 'fade';
+            const hasHide = effect === 'hide';
+            const hasFade = effect === 'fade';
             this.destroyCollapsibleFooter();
-            if (hasFade) {
-                const appRootSelector = config.get('appRootSelector', 'ion-app');
-                const pageEl = this.el.closest(`${appRootSelector},ion-page,.ion-page,page-inner`);
-                const contentEl = pageEl ? findIonContent(pageEl) : null;
+            const appRootSelector = config.get('appRootSelector', 'ion-app');
+            const pageEl = this.el.closest(`${appRootSelector}, ion-page, .ion-page, page-inner`);
+            const contentEl = pageEl ? findIonContent(pageEl) : null;
+            if (hasHide && contentEl) {
+                this.activeEffect = effect;
+                await this.setupScrollEffectHide(contentEl);
+                return;
+            }
+            // fade via the deprecated `collapse` prop is iOS-only.
+            // fade via the new `scrollEffect` prop works in all themes.
+            const isModeRestricted = scrollEffect === undefined && getIonTheme(this) !== 'ios';
+            if (hasFade && !isModeRestricted) {
                 if (!contentEl) {
                     printIonContentErrorMsg(this.el);
                     return;
                 }
                 this.setupFadeFooter(contentEl);
+                this.activeEffect = effect;
+            }
+        };
+        this.setupScrollEffectHide = async (contentEl) => {
+            const setupPromise = createScrollHideController(contentEl, {
+                el: this.el,
+                cssVar: '--internal-footer-hide-height',
+                hiddenClass: 'footer-scroll-hidden',
+                contentPartnerClass: 'content-footer-hide-scroll-partner',
+                contentHiddenClass: 'content-footer-hide-scroll-hidden',
+            });
+            this.scrollHideCtrlPromise = setupPromise;
+            const controller = await setupPromise;
+            if (this.scrollHideCtrlPromise === setupPromise) {
+                this.scrollHideCtrlPromise = null;
+                controller.init();
+                this.scrollHideCtrl = controller;
             }
         };
         this.setupFadeFooter = async (contentEl) => {
-            const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
+            const setupId = ++this.fadeSetupId;
+            const scrollEl = await getScrollElement(contentEl);
+            if (this.fadeSetupId !== setupId) {
+                return;
+            }
+            this.scrollEl = scrollEl;
             /**
              * Handle fading of toolbars on scroll
              */
@@ -90,6 +134,7 @@ export class Footer {
         }
     }
     disconnectedCallback() {
+        this.destroyCollapsibleFooter();
         if (this.keyboardCtrlPromise) {
             this.keyboardCtrlPromise.then((ctrl) => ctrl.destroy());
             this.keyboardCtrlPromise = null;
@@ -100,25 +145,38 @@ export class Footer {
         }
     }
     destroyCollapsibleFooter() {
+        this.activeEffect = undefined;
+        this.fadeSetupId++;
+        this.scrollHideCtrlPromise = null;
+        if (this.scrollHideCtrl) {
+            this.scrollHideCtrl.destroy();
+            this.scrollHideCtrl = undefined;
+        }
         if (this.scrollEl && this.contentScrollCallback) {
             this.scrollEl.removeEventListener('scroll', this.contentScrollCallback);
             this.contentScrollCallback = undefined;
         }
     }
     render() {
-        const { translucent, collapse } = this;
+        const { translucent, scrollEffect, collapse } = this;
         const theme = getIonTheme(this);
+        const effect = scrollEffect !== null && scrollEffect !== void 0 ? scrollEffect : collapse;
+        // fade via the deprecated `collapse` prop is iOS-only.
+        const isModeRestricted = scrollEffect === undefined && theme !== 'ios';
+        const hasHide = effect === 'hide';
+        const hasFade = effect === 'fade' && !isModeRestricted;
         const tabs = this.el.closest('ion-tabs');
         const tabBar = tabs === null || tabs === void 0 ? void 0 : tabs.querySelector(':scope > ion-tab-bar');
-        return (h(Host, { key: '4a2989a177b47ee26ffa23e2c9f5418773584796', role: "contentinfo", class: {
+        return (h(Host, { key: 'a0777b4a639d22e15374879f018efcf589e756f8', role: "contentinfo", class: {
                 [theme]: true,
                 // Used internally for styling
                 [`footer-${theme}`]: true,
                 [`footer-translucent`]: translucent,
                 [`footer-translucent-${theme}`]: translucent,
                 ['footer-toolbar-padding']: !this.keyboardVisible && (!tabBar || tabBar.slot !== 'bottom'),
-                [`footer-collapse-${collapse}`]: collapse !== undefined,
-            } }, theme === 'ios' && translucent && h("div", { key: 'c644963db3e06254014e398ea02189d6127ccf61', class: "footer-background" }), h("slot", { key: '839e33c6c30f5c1c703239a19458ff10da9a5e76' })));
+                'footer-collapse-fade': hasFade,
+                'footer-scroll-effect-hide': hasHide,
+            } }, theme === 'ios' && translucent && h("div", { key: 'd78b46870cbf11c95b066d649c04ec398b66e614', class: "footer-background" }), h("slot", { key: '9dc34787cd29597fe1b1198db317602014ac1483' })));
     }
     static get is() { return "ion-footer"; }
     static get originalStyleUrls() {
@@ -137,6 +195,32 @@ export class Footer {
     }
     static get properties() {
         return {
+            "scrollEffect": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FooterScrollEffect",
+                    "resolved": "\"fade\" | \"hide\" | undefined",
+                    "references": {
+                        "FooterScrollEffect": {
+                            "location": "import",
+                            "path": "./footer-interface",
+                            "id": "src/components/footer/footer-interface.ts::FooterScrollEffect",
+                            "referenceLocation": "FooterScrollEffect"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Describes the scroll effect that will be applied to the footer.\n`\"hide\"` slides the footer out of view when scrolling down and back in\nwhen scrolling up.\n`\"fade\"` fades the toolbar background on scroll."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "scroll-effect"
+            },
             "collapse": {
                 "type": "string",
                 "mutable": false,
@@ -148,7 +232,10 @@ export class Footer {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `scrollEffect` instead."
+                        }],
                     "text": "Describes the scroll effect that will be applied to the footer.\nOnly applies when the theme is `\"ios\"`."
                 },
                 "getter": false,

package/dist/collection/components/footer/footer.md.css

@@ -71,6 +71,25 @@ ion-footer.footer-toolbar-padding ion-toolbar:last-of-type {
   padding-bottom: var(--ion-safe-area-bottom, 0);
 }
 
+.footer-collapse-fade ion-toolbar {
+  --opacity-scale: inherit;
+}
+
+ion-footer.footer-scroll-effect-hide {
+  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+ion-footer.footer-scroll-effect-hide.footer-scroll-hidden {
+  transform: translateY(100%);
+  transition: transform 350ms cubic-bezier(0.4, 0, 1, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ion-footer.footer-scroll-effect-hide,
+  ion-footer.footer-scroll-effect-hide.footer-scroll-hidden {
+    transition: none;
+  }
+}
 /**
  * Convert a pixels given value into rem
  * 
@@ -136,6 +155,15 @@ ion-footer.footer-toolbar-padding ion-toolbar:last-of-type {
   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);
 }
 
+/**
+ * The fade effect fades the toolbar background via --opacity-scale,
+ * but box-shadow is not affected by that variable. Remove it so
+ * the shadow doesn't persist when the background is faded out.
+ */
+.footer-md.footer-collapse-fade {
+  box-shadow: none;
+}
+
 .footer-md.ion-no-border {
   box-shadow: none;
 }

package/dist/collection/components/header/header-interface.js

@@ -0,0 +1 @@
+export {};

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

@@ -9,6 +9,159 @@ ion-header ion-toolbar:first-of-type {
   padding-top: var(--ion-safe-area-top, 0);
 }
 
+.header-collapse-fade ion-toolbar {
+  --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;
+}
+
+.header-collapse-condense ion-toolbar {
+  position: sticky;
+  top: 0;
+}
+
+.header-collapse-condense ion-toolbar:first-of-type {
+  /**
+   * The toolbar that contains the collapsible
+   * large title should not have safe area padding applied.
+   */
+  padding-top: 0px;
+  z-index: 1;
+}
+
+/**
+ * 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 {
+  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 {
+  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;
+  pointer-events: none;
+}
+
+/**
+ * There is a bug in Safari where changing
+ * the opacity of an element in a scrollable container
+ * while rubber-banding causes the scroll position
+ * to jump to the top
+ */
+.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;
+}
+
+/**
+ * The main header is only hidden once the collapsible large
+ * title is configured. As a result, if the main header loads
+ * before the collapsible large title is configured then the
+ * main header will be visible briefly before being hidden
+ * by the collapsible large title.
+ *
+ * The following selector ensures that any main header
+ * on a page with a collapsible large title is hidden
+ * before the collapsible large title is configured.
+ * Once the collapsible large title is configured the main
+ * header will have the ".header-collapse-main" class, and
+ * this selector will no longer apply.
+ *
+ * The :has(...) part of the selector ensures a couple things:
+ * 1. This will only apply within a page view since the content
+ * must be a subsequent-sibling of the header (~ ion-content).
+ * 2. This will only apply when that content has an active condense
+ *    header (the .header-collapse-condense class).
+ *
+ * We use opacity: 0 to avoid a layout shift.
+ * We use the class (not the attribute) because the class is only
+ * added when the condense effect is valid (large title present).
+ * The attribute alone is not sufficient since it would match even
+ * when the effect is guarded (e.g. no large title).
+ */
+ion-header:not(.header-collapse-main):has(~ ion-content ion-header.header-collapse-condense) {
+  opacity: 0;
+}
+
+/**
+ * The deprecated collapse="condense" prop is iOS-only.
+ * On non-iOS themes, the condense header should be hidden since
+ * the JS won't activate it. Uses a class instead of an attribute
+ * selector because collapse is not a reflected prop, and framework
+ * proxies (Angular/Vue) bind it as a property.
+ */
+.header-collapse-condense-hidden {
+  display: none;
+}
+
+ion-header.header-scroll-effect-hide {
+  transition: transform 300ms cubic-bezier(0, 0, 0.2, 1), opacity 300ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+ion-header.header-scroll-effect-hide.header-scroll-hidden {
+  transform: translateY(-100%);
+  transition: transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 300ms cubic-bezier(0.4, 0, 1, 1);
+  opacity: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ion-header.header-scroll-effect-hide,
+  ion-header.header-scroll-effect-hide.header-scroll-hidden {
+    transition: none;
+  }
+}
 /**
  * A heuristic that applies CSS to tablet
  * viewports.