From 4e8ecc293a9b0655dc173df96609b4e7a4031d5a Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Fri, 28 Aug 2026 15:59:14 -0400
Subject: [PATCH 01/18] fix(modal): prevent ion-content collapsing at
content-based heights
resolves #31149
---
core/src/components/content/content.tsx | 28 ++++++++++++++++++-
core/src/components/modal/modal.scss | 15 +++++++++-
core/src/css/core.scss | 37 +++++++++++++++++++++++++
3 files changed, 78 insertions(+), 2 deletions(-)
diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx
index b0673b414d5..485862d4749 100644
--- a/core/src/components/content/content.tsx
+++ b/core/src/components/content/content.tsx
@@ -310,6 +310,26 @@ export class Content implements ComponentInterface {
return forceOverscroll === undefined ? mode === 'ios' && isPlatform('ios') : forceOverscroll;
}
+ /**
+ * Whether this component should size itself to its contents height, which
+ * is the case inside any popover and inside a modal whose `--height` is a
+ * content-based value. Those overlays give the content no definite height
+ * to fill.
+ */
+ private shouldSizeToContent() {
+ if (hostContext('ion-popover', this.el)) {
+ return true;
+ }
+
+ const modal = this.el.closest('ion-modal');
+ if (modal === null) {
+ return false;
+ }
+
+ const height = getComputedStyle(modal).getPropertyValue('--height').trim();
+ return CONTENT_SIZED_HEIGHTS.includes(height);
+ }
+
private resize() {
/**
* Only force update if the component is rendered in a browser context.
@@ -538,7 +558,7 @@ export class Content implements ComponentInterface {
class={createColorClasses(this.color, {
[mode]: true,
'content-fullscreen': this.fullscreen,
- 'content-sizing': hostContext('ion-popover', this.el),
+ 'content-sizing': this.shouldSizeToContent(),
overscroll: forceOverscroll,
[`content-${rtl}`]: true,
})}
@@ -579,6 +599,12 @@ export class Content implements ComponentInterface {
}
}
+/**
+ * `ion-modal` `--height` values that size the modal to its contents, leaving
+ * children an indefinite height to resolve against.
+ */
+const CONTENT_SIZED_HEIGHTS = ['auto', 'fit-content', 'min-content', 'max-content'];
+
const getParentElement = (el: any) => {
if (el.parentElement) {
// normal element with a parent element
diff --git a/core/src/components/modal/modal.scss b/core/src/components/modal/modal.scss
index 0df4a448cd3..a55e456bb0f 100644
--- a/core/src/components/modal/modal.scss
+++ b/core/src/components/modal/modal.scss
@@ -27,7 +27,12 @@
--max-width: auto;
--height: 100%;
--min-height: auto;
- --max-height: auto;
+ /**
+ * Clamps a content-sized `--height` (auto, fit-content, ...) to the
+ * overlay, giving the wrapper's flex children something to shrink
+ * toward so `ion-content` scrolls instead of overflowing.
+ */
+ --max-height: 100%;
--overflow: hidden;
--border-radius: 0;
--border-width: 0;
@@ -87,8 +92,16 @@ ion-backdrop {
/**
* The wrapper receives programmatic focus for screen readers but should not
* show a visible focus ring, which is meant only for keyboard navigation.
+ *
+ * A flex layout is required for the wrapper to size itself to its content
+ * when the modal is content-sized (`--height` is auto, fit-content, ...).
+ * This makes it so that the content can scroll when it overflows the wrapper.
*/
.modal-wrapper {
+ display: flex;
+
+ flex-direction: column;
+
outline: none;
}
diff --git a/core/src/css/core.scss b/core/src/css/core.scss
index c7f7357ab46..d86184a326a 100644
--- a/core/src/css/core.scss
+++ b/core/src/css/core.scss
@@ -203,9 +203,46 @@ ion-modal > .ion-page {
contain: layout style;
+ /**
+ * Override the minimum height a flex item gets, which defaults to
+ * use the height of its own content. Without this, a modal sized
+ * to its content clips its overflow instead of scrolling it.
+ */
+ min-height: 0;
+
height: 100%;
}
+/**
+ * Position the `ion-nav` and its page relatively when inside of an
+ * `ion-content` that is sized to its content. This allows the `ion-nav`
+ * to take its height from its page and size itself correctly. Without
+ * this, the modal will not appear as the nav will be 0 height.
+ */
+ion-content.content-sizing ion-nav,
+ion-content.content-sizing ion-nav > .ion-page {
+ position: relative;
+
+ contain: layout style;
+
+ height: auto;
+}
+
+/**
+ * Place every page in the same grid cell so they overlap, while still
+ * letting the nav take its height from the tallest of them. Without
+ * this, a transition that has two pages in the tree at once would
+ * render them one below the other.
+ */
+ion-content.content-sizing ion-nav {
+ display: grid;
+}
+
+ion-content.content-sizing ion-nav > .ion-page {
+ grid-row: 1;
+ grid-column: 1;
+}
+
.split-pane-visible > .ion-page.split-pane-main {
position: relative;
}
From e63841c2c8b44b03715157b346991ccb9d2f0882 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Fri, 28 Aug 2026 16:43:53 -0400
Subject: [PATCH 02/18] test(modal): add content-height preview test
---
.../modal/test/content-height/index.html | 353 ++++++++++++++++++
1 file changed, 353 insertions(+)
create mode 100644 core/src/components/modal/test/content-height/index.html
diff --git a/core/src/components/modal/test/content-height/index.html b/core/src/components/modal/test/content-height/index.html
new file mode 100644
index 00000000000..6cc01769a64
--- /dev/null
+++ b/core/src/components/modal/test/content-height/index.html
@@ -0,0 +1,353 @@
+
+
+
+
+ Modal - Content Height
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
*/
document.querySelector('ion-modal#nav-modal').component = document.createElement('nav-host');
+ /**
+ * Adds and removes an inline `--height`, so the modal falls back to its
+ * own default in between.
+ */
+ document.querySelector('button#toggle-height').addEventListener('click', () => {
+ const modal = document.querySelector('ion-modal#toggle-modal');
+ if (modal.style.getPropertyValue('--height') === '') {
+ modal.style.setProperty('--height', 'fit-content');
+ } else {
+ modal.style.removeProperty('--height');
+ }
+ });
+
document.querySelectorAll('ion-list.short').forEach((list) => fillList(list, 3));
document.querySelectorAll('ion-list.long').forEach((list) => fillList(list, 30));
From 51e8923048947202473774ebeb7cc250ab877a3e Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Mon, 31 Aug 2026 16:58:54 -0400
Subject: [PATCH 04/18] fix(content): watch for changes to --height and respect
prefixed values
---
core/src/components/content/content.tsx | 68 ++++++++++++++++++++++++-
1 file changed, 66 insertions(+), 2 deletions(-)
diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx
index 485862d4749..c71a926033b 100644
--- a/core/src/components/content/content.tsx
+++ b/core/src/components/content/content.tsx
@@ -46,8 +46,10 @@ export class Content implements ComponentInterface {
private scrollEl?: HTMLElement;
private backgroundContentEl?: HTMLElement;
private isMainContent = true;
+ private sizeToContent = false;
private resizeTimeout: ReturnType | null = null;
private fullscreenResizeObserver?: ResizeObserver;
+ private sizeToContentObserver?: MutationObserver;
private inheritedAttributes: Attributes = {};
private tabsElement: HTMLElement | null = null;
@@ -190,6 +192,7 @@ export class Content implements ComponentInterface {
// Re-observe on reattach, since componentDidLoad only fires once.
this.setupFullscreenResizeObserver();
+ this.setupSizeToContentObserver();
}
componentDidLoad() {
@@ -222,6 +225,7 @@ export class Content implements ComponentInterface {
}
this.destroyFullscreenResizeObserver();
+ this.destroySizeToContentObserver();
}
/**
@@ -258,6 +262,51 @@ export class Content implements ComponentInterface {
this.fullscreenResizeObserver.observe(this.el);
}
+ /**
+ * A modal's `--height` can be changed at runtime with no event to react to,
+ * either by setting the property directly or by toggling a class that changes
+ * which rule wins. Both of those mutate an attribute on the modal, so watch
+ * for that and re-evaluate. Viewport driven changes are already covered by
+ * the `resize` listener.
+ */
+ private setupSizeToContentObserver() {
+ if (!Build.isBrowser || typeof MutationObserver === 'undefined') {
+ return;
+ }
+
+ if (this.sizeToContentObserver !== undefined) {
+ return;
+ }
+
+ const modal = this.el.closest('ion-modal');
+ if (modal === null) {
+ return;
+ }
+
+ this.sizeToContentObserver = new MutationObserver(() => this.updateSizeToContent());
+ this.sizeToContentObserver.observe(modal, { attributes: true, attributeFilter: ['style', 'class'] });
+ }
+
+ private destroySizeToContentObserver() {
+ if (this.sizeToContentObserver !== undefined) {
+ this.sizeToContentObserver.disconnect();
+ this.sizeToContentObserver = undefined;
+ }
+ }
+
+ /**
+ * Re-renders when the overlay is no longer sized the way the last render
+ * assumed. Read in a `readTask` because resolving the custom property forces
+ * a style recalculation.
+ */
+ private updateSizeToContent() {
+ readTask(() => {
+ if (this.shouldSizeToContent() !== this.sizeToContent) {
+ forceUpdate(this);
+ }
+ });
+ }
+
private destroyFullscreenResizeObserver() {
if (this.fullscreenResizeObserver !== undefined) {
this.fullscreenResizeObserver.disconnect();
@@ -327,7 +376,15 @@ export class Content implements ComponentInterface {
}
const height = getComputedStyle(modal).getPropertyValue('--height').trim();
- return CONTENT_SIZED_HEIGHTS.includes(height);
+
+ /**
+ * Compared as a suffix so a value carrying only a vendor prefix is still
+ * recognized, such as the `-moz-fit-content` that Firefox needs before 94.
+ *
+ * TODO: replace with `CONTENT_SIZED_HEIGHTS.includes(height)` once the
+ * oldest supported Firefox is 94 or higher.
+ */
+ return CONTENT_SIZED_HEIGHTS.some((value) => height.endsWith(value));
}
private resize() {
@@ -340,6 +397,13 @@ export class Content implements ComponentInterface {
* TODO: Remove if STENCIL-834 determines Stencil will account for this.
*/
if (Build.isBrowser) {
+ /**
+ * A window resize can cross a media query that changes the modal's
+ * `--height`. The content's own offsets are unchanged, so neither branch
+ * below re-renders and the class from the last render would go stale.
+ */
+ this.updateSizeToContent();
+
if (this.fullscreen) {
readTask(() => this.readDimensions());
} else if (this.cTop !== 0 || this.cBottom !== 0) {
@@ -558,7 +622,7 @@ export class Content implements ComponentInterface {
class={createColorClasses(this.color, {
[mode]: true,
'content-fullscreen': this.fullscreen,
- 'content-sizing': this.shouldSizeToContent(),
+ 'content-sizing': (this.sizeToContent = this.shouldSizeToContent()),
overscroll: forceOverscroll,
[`content-${rtl}`]: true,
})}
From 54b159667ac2c8d8ab897b255f157406217b9b0f Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Mon, 31 Aug 2026 17:32:25 -0400
Subject: [PATCH 05/18] test(modal): add e2e tests for various --height values
---
.../modal/test/content-height/modal.e2e.ts | 316 ++++++++++++++++++
1 file changed, 316 insertions(+)
create mode 100644 core/src/components/modal/test/content-height/modal.e2e.ts
diff --git a/core/src/components/modal/test/content-height/modal.e2e.ts b/core/src/components/modal/test/content-height/modal.e2e.ts
new file mode 100644
index 00000000000..074710891cb
--- /dev/null
+++ b/core/src/components/modal/test/content-height/modal.e2e.ts
@@ -0,0 +1,316 @@
+import { expect } from '@playwright/test';
+import type { E2EPage } from '@utils/test/playwright';
+import { configs, test } from '@utils/test/playwright';
+
+const ISSUE = 'https://github.com/ionic-team/ionic-framework/issues/31149';
+
+/** Height of the child inside `ion-content`, so sizing can be asserted exactly. */
+const CHILD_HEIGHT = 200;
+
+/** Taller than any viewport under test, to force the overflow cases. */
+const TALL_CHILD_HEIGHT = 2000;
+
+const contentModal = (style: string, childHeight = CHILD_HEIGHT) => `
+
+
+
+
+
+
+`;
+
+/**
+ * Nav pages have to be registered before `ion-nav` resolves its root, and the
+ * nav has to arrive through the modal's `component` delegate. An `ion-nav`
+ * slotted inline renders no pages at all.
+ */
+const NAV_MODAL = `
+
+
+`;
+
+const getContentHeight = async (page: E2EPage) => {
+ const box = await page.locator('ion-modal ion-content').first().boundingBox();
+ return box?.height ?? 0;
+};
+
+const getWrapperHeight = async (page: E2EPage) => {
+ const box = await page.locator('ion-modal .modal-wrapper').boundingBox();
+ return box?.height ?? 0;
+};
+
+/**
+ * A content-sized modal has no definite height to hand down, so the scroll
+ * container only scrolls if it can shrink against the modal's `--max-height`.
+ * `scrollHeight > clientHeight` is what separates scrolling from clipping.
+ */
+const getScrollMetrics = (page: E2EPage) => {
+ return page.locator('ion-modal ion-content').evaluate(async (el: HTMLIonContentElement) => {
+ const scrollEl = await el.getScrollElement();
+ return { scrollHeight: scrollEl.scrollHeight, clientHeight: scrollEl.clientHeight };
+ });
+};
+
+/** Presents a nav modal through the delegate and waits for its first page. */
+const presentNavModal = async (page: E2EPage) => {
+ const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+ await page.locator('ion-modal').evaluate((modal: HTMLIonModalElement) => {
+ modal.component = document.createElement('nav-host');
+ return modal.present();
+ });
+
+ await ionModalDidPresent.next();
+ await page.locator('ion-modal ion-nav nav-page-one').waitFor();
+};
+
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+ test.describe(title('modal: content height'), () => {
+ test.describe('content-based heights', () => {
+ /**
+ * Each of these leaves the content an indefinite height to resolve
+ * against, which is what used to collapse it. The content holds a single
+ * fixed height child, so a correct result is exactly that height:
+ * collapsed content measures 0, and a modal that ignored the height would
+ * fill the screen.
+ */
+ const expectSizedToContent = async (page: E2EPage, height: string) => {
+ await page.setContent(contentModal(`--height: ${height};`), config);
+ await expect(page.locator('ion-modal')).toBeVisible();
+
+ await expect(page.locator('ion-modal ion-content')).toHaveClass(/content-sizing/);
+ expect(await getContentHeight(page)).toBeCloseTo(CHILD_HEIGHT, 0);
+ };
+
+ test('should size the content with fit-content', async ({ page }) => {
+ test.info().annotations.push({ type: 'issue', description: ISSUE });
+
+ await expectSizedToContent(page, 'fit-content');
+ });
+
+ test('should size the content with auto', async ({ page }) => {
+ test.info().annotations.push({ type: 'issue', description: ISSUE });
+
+ await expectSizedToContent(page, 'auto');
+ });
+
+ test('should size the content with min-content', async ({ page }) => {
+ test.info().annotations.push({ type: 'issue', description: ISSUE });
+
+ await expectSizedToContent(page, 'min-content');
+ });
+
+ test('should size the content with max-content', async ({ page }) => {
+ test.info().annotations.push({ type: 'issue', description: ISSUE });
+
+ await expectSizedToContent(page, 'max-content');
+ });
+
+ test('should size the content with a prefixed fit-content', async ({ page }) => {
+ /**
+ * Firefox only took `fit-content` unprefixed in 94, so a value carrying
+ * only the `-moz-` prefix still has to be recognized.
+ */
+ await expectSizedToContent(page, '-moz-fit-content');
+ });
+ });
+
+ test.describe('definite heights', () => {
+ test('should fill the screen with the default height', async ({ page }) => {
+ await page.setContent(contentModal(''), config);
+ await expect(page.locator('ion-modal')).toBeVisible();
+
+ const viewport = page.viewportSize()!;
+
+ // Content sizing should not be applied by default.
+ await expect(page.locator('ion-modal ion-content')).not.toHaveClass(/content-sizing/);
+ expect(await getContentHeight(page)).toBeCloseTo(viewport.height, 0);
+ });
+
+ test('should fill and scroll a pixel height', async ({ page }) => {
+ await page.setContent(contentModal('--height: 300px;', TALL_CHILD_HEIGHT), config);
+ await expect(page.locator('ion-modal')).toBeVisible();
+
+ // A definite height is not content-sized, so the ion-content
+ // should fill the modal the way it always has.
+ await expect(page.locator('ion-modal ion-content')).not.toHaveClass(/content-sizing/);
+ expect(await getWrapperHeight(page)).toBeCloseTo(300, 0);
+
+ const { scrollHeight, clientHeight } = await getScrollMetrics(page);
+ expect(clientHeight).toBeCloseTo(300, 0);
+ expect(scrollHeight).toBeGreaterThan(clientHeight);
+ });
+
+ test('should clamp a pixel height taller than the overlay', async ({ page }) => {
+ await page.setContent(contentModal('--height: 2000px;'), config);
+ await expect(page.locator('ion-modal')).toBeVisible();
+
+ const viewport = page.viewportSize()!;
+
+ // 2000px exceeds the overlay, so the default --max-height: 100% should
+ // clamp the height rather than letting it run off screen.
+ expect(await getWrapperHeight(page)).toBeCloseTo(viewport.height, 0);
+ });
+ });
+
+ test.describe('overflowing content', () => {
+ test('should scroll rather than overflow the screen', async ({ page }) => {
+ await page.setContent(contentModal('--height: fit-content;', TALL_CHILD_HEIGHT), config);
+ await expect(page.locator('ion-modal')).toBeVisible();
+
+ const viewport = page.viewportSize()!;
+
+ // The default --max-height keeps a content-sized modal inside the
+ // overlay. Rounded up by one, since the clamp lands on a sub-pixel.
+ expect(await getWrapperHeight(page)).toBeLessThanOrEqual(viewport.height + 1);
+
+ // The content shrinks to reach that cap, leaving the child scrollable.
+ const { scrollHeight, clientHeight } = await getScrollMetrics(page);
+ expect(scrollHeight).toBeGreaterThan(clientHeight);
+ });
+
+ test('should honor a smaller --max-height', async ({ page }) => {
+ await page.setContent(contentModal('--height: fit-content; --max-height: 50%;', TALL_CHILD_HEIGHT), config);
+ await expect(page.locator('ion-modal')).toBeVisible();
+
+ const viewport = page.viewportSize()!;
+
+ // Setting --max-height to 50% should shrink the modal to half the
+ // viewport, rounded up by one.
+ expect(await getWrapperHeight(page)).toBeLessThanOrEqual(viewport.height * 0.5 + 1);
+
+ // The content shrinks to reach that cap, leaving the child scrollable.
+ const { scrollHeight, clientHeight } = await getScrollMetrics(page);
+ expect(scrollHeight).toBeGreaterThan(clientHeight);
+ });
+ });
+
+ test.describe('structure and reactivity', () => {
+ test('should size a modal that has no ion-content', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+
+
+ `,
+ config
+ );
+ await expect(page.locator('ion-modal')).toBeVisible();
+
+ // Sized through `ion-modal > .ion-page` alone, with none of the
+ // content-sizing detection involved.
+ await expect(page.locator('ion-modal ion-content')).toHaveCount(0);
+ expect(await getWrapperHeight(page)).toBeCloseTo(CHILD_HEIGHT, 0);
+ });
+
+ test('should size a modal around an ion-nav and follow it between pages', async ({ page }) => {
+ await page.setContent(`${NAV_MODAL}`, config);
+ await presentNavModal(page);
+
+ // Without the nav being positioned relatively it has no intrinsic
+ // height, so the modal would be 0.
+ const pageOneHeight = await getWrapperHeight(page);
+ expect(pageOneHeight).toBeGreaterThan(100);
+
+ // Page two is taller, so the modal grows to follow the active page.
+ await page.locator('ion-modal ion-nav').evaluate((nav: HTMLIonNavElement) => nav.push('nav-page-two'));
+ await page.locator('ion-modal #tall-block').waitFor();
+
+ expect(await getWrapperHeight(page)).toBeGreaterThan(pageOneHeight);
+ });
+
+ test('should overlap nav pages mid-transition rather than stack them', async ({ page }) => {
+ /**
+ * `setContent` leaves animations enabled, unlike `goto`, so both nav
+ * pages are in the tree at once during the slide. That is the only way
+ * to catch them being laid out one below the other.
+ */
+ await page.setContent(`${NAV_MODAL}`, config);
+ await presentNavModal(page);
+
+ const tops = await page.locator('ion-modal ion-nav').evaluate(async (nav: any) => {
+ nav.push('nav-page-two');
+
+ /**
+ * A page that has been hidden reports a zero rect, so only pages with
+ * a real box count. Sampled per frame because the window where both
+ * are laid out lasts only as long as the slide.
+ */
+ for (let i = 0; i < 60; i++) {
+ await new Promise((resolve) => requestAnimationFrame(resolve));
+
+ const laidOut = Array.from(nav.children).filter((c: any) => c.getBoundingClientRect().height > 0);
+ if (laidOut.length > 1) {
+ return laidOut.map((c: any) => Math.round(c.getBoundingClientRect().top));
+ }
+ }
+
+ return [];
+ });
+
+ // Both pages are laid out during the slide and must share an origin.
+ expect(tops.length).toBeGreaterThan(1);
+ expect(new Set(tops).size).toBe(1);
+ });
+
+ test('should respect a --height set on the modal at runtime', async ({ page }) => {
+ await page.setContent(contentModal(''), config);
+ await expect(page.locator('ion-modal')).toBeVisible();
+
+ const viewport = page.viewportSize()!;
+ const modal = page.locator('ion-modal');
+ const content = page.locator('ion-modal ion-content');
+
+ // No --height of its own, so the modal is on its default full height.
+ await expect(content).not.toHaveClass(/content-sizing/);
+ expect(await getWrapperHeight(page)).toBeCloseTo(viewport.height, 0);
+
+ // Set the --height and verify the observer is picking it up and
+ // adding the content-sizing class to the content.
+ await modal.evaluate((el: HTMLElement) => el.style.setProperty('--height', 'fit-content'));
+ await expect(content).toHaveClass(/content-sizing/);
+ expect(await getContentHeight(page)).toBeCloseTo(CHILD_HEIGHT, 0);
+
+ // Removing it falls back to the default, so a class left behind in
+ // either direction is caught.
+ await modal.evaluate((el: HTMLElement) => el.style.removeProperty('--height'));
+ await expect(content).not.toHaveClass(/content-sizing/);
+ expect(await getWrapperHeight(page)).toBeCloseTo(viewport.height, 0);
+ });
+ });
+ });
+});
From d5b4e75e535f9284adfbf0795193c871c3eecc17 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Wed, 2 Sep 2026 16:47:35 -0400
Subject: [PATCH 06/18] style: comment the test config
---
core/src/components/modal/test/content-height/modal.e2e.ts | 3 +++
1 file changed, 3 insertions(+)
diff --git a/core/src/components/modal/test/content-height/modal.e2e.ts b/core/src/components/modal/test/content-height/modal.e2e.ts
index 074710891cb..77550fe4411 100644
--- a/core/src/components/modal/test/content-height/modal.e2e.ts
+++ b/core/src/components/modal/test/content-height/modal.e2e.ts
@@ -93,6 +93,9 @@ const presentNavModal = async (page: E2EPage) => {
await page.locator('ion-modal ion-nav nav-page-one').waitFor();
};
+/**
+ * This behavior does not vary across directions/modes
+ */
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
test.describe(title('modal: content height'), () => {
test.describe('content-based heights', () => {
From 729864582ea998412e4d8ef5fdfcec7526e5f98f Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Wed, 2 Sep 2026 16:49:35 -0400
Subject: [PATCH 07/18] style: update comment to drop TODO
---
core/src/components/content/content.tsx | 8 +++-----
1 file changed, 3 insertions(+), 5 deletions(-)
diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx
index c71a926033b..4b69b3c2ebf 100644
--- a/core/src/components/content/content.tsx
+++ b/core/src/components/content/content.tsx
@@ -378,11 +378,9 @@ export class Content implements ComponentInterface {
const height = getComputedStyle(modal).getPropertyValue('--height').trim();
/**
- * Compared as a suffix so a value carrying only a vendor prefix is still
- * recognized, such as the `-moz-fit-content` that Firefox needs before 94.
- *
- * TODO: replace with `CONTENT_SIZED_HEIGHTS.includes(height)` once the
- * oldest supported Firefox is 94 or higher.
+ * Compared as a suffix so a value carrying a vendor prefix is still
+ * recognized, such as `-webkit-fit-content` or the `-moz-fit-content`
+ * that Firefox needed before 94.
*/
return CONTENT_SIZED_HEIGHTS.some((value) => height.endsWith(value));
}
From 67383392da429e277e837f8ee510b053086683a9 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Wed, 2 Sep 2026 17:15:44 -0400
Subject: [PATCH 08/18] style: update comment to specify the limitation on
--height
---
core/src/components/content/content.tsx | 22 ++++++++++++++--------
1 file changed, 14 insertions(+), 8 deletions(-)
diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx
index 4b69b3c2ebf..e2ec2b8e6a3 100644
--- a/core/src/components/content/content.tsx
+++ b/core/src/components/content/content.tsx
@@ -263,11 +263,11 @@ export class Content implements ComponentInterface {
}
/**
- * A modal's `--height` can be changed at runtime with no event to react to,
- * either by setting the property directly or by toggling a class that changes
- * which rule wins. Both of those mutate an attribute on the modal, so watch
- * for that and re-evaluate. Viewport driven changes are already covered by
- * the `resize` listener.
+ * A modal's `--height` can be changed at runtime with no event to react
+ * to, either by setting the property directly or by toggling a class that
+ * changes which rule wins. Both of those mutate an attribute on the modal,
+ * so watch for that and re-evaluate. Viewport driven changes are already
+ * covered by the `resize` listener.
*/
private setupSizeToContentObserver() {
if (!Build.isBrowser || typeof MutationObserver === 'undefined') {
@@ -360,10 +360,16 @@ export class Content implements ComponentInterface {
}
/**
- * Whether this component should size itself to its contents height, which
- * is the case inside any popover and inside a modal whose `--height` is a
- * content-based value. Those overlays give the content no definite height
+ * Whether to size the component to its content height.
+ *
+ * This applies inside popovers and modals with a content-based `--height`,
+ * where the overlay does not provide the content with a definite height
* to fill.
+ *
+ * Only `--height` is consulted. Styling the wrapper directly, such as
+ * `ion-modal::part(content) { height: fit-content; }`, does not change
+ * `--height` and therefore cannot be observed. `--height` is the only
+ * supported way to opt into content-based sizing.
*/
private shouldSizeToContent() {
if (hostContext('ion-popover', this.el)) {
From dff4f83467d472abbdda0d55997d7c8b33bb073a Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Tue, 8 Sep 2026 16:10:47 -0400
Subject: [PATCH 09/18] fix(content): account for height changes when unmounted
---
core/src/components/content/content.tsx | 1 +
.../modal/test/content-height/modal.e2e.ts | 49 +++++++++++++++++++
2 files changed, 50 insertions(+)
diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx
index e2ec2b8e6a3..1a9bb58b3d2 100644
--- a/core/src/components/content/content.tsx
+++ b/core/src/components/content/content.tsx
@@ -193,6 +193,7 @@ export class Content implements ComponentInterface {
// Re-observe on reattach, since componentDidLoad only fires once.
this.setupFullscreenResizeObserver();
this.setupSizeToContentObserver();
+ this.updateSizeToContent();
}
componentDidLoad() {
diff --git a/core/src/components/modal/test/content-height/modal.e2e.ts b/core/src/components/modal/test/content-height/modal.e2e.ts
index 77550fe4411..0a363c07618 100644
--- a/core/src/components/modal/test/content-height/modal.e2e.ts
+++ b/core/src/components/modal/test/content-height/modal.e2e.ts
@@ -10,6 +10,12 @@ const CHILD_HEIGHT = 200;
/** Taller than any viewport under test, to force the overflow cases. */
const TALL_CHILD_HEIGHT = 2000;
+/**
+ * Delays the remount long enough to trigger a fresh evaluation, but not long
+ * enough for the modal's later safe-area write to clear the stale class.
+ */
+const REMOUNT_TIMEOUT = 100;
+
const contentModal = (style: string, childHeight = CHILD_HEIGHT) => `
${NAV_MODAL}`, config);
+ await presentNavModal(page);
+
+ // Awaiting the push resolves once the transition is done.
+ await page.locator('ion-modal ion-nav').evaluate((nav: HTMLIonNavElement) => nav.push('nav-page-two'));
+
+ const arrived = page.locator('ion-modal nav-page-two');
+ await expect(arrived.locator('ion-title')).toBeVisible();
+ await expect(page.locator('ion-modal nav-page-one')).toBeHidden();
+
+ // A page left mid-slide still has a box, so the box has to line up with
+ // the modal on both axes for the transition to have actually landed.
+ const pageBox = (await arrived.boundingBox())!;
+ const wrapperBox = (await page.locator('ion-modal .modal-wrapper').boundingBox())!;
+ expect(pageBox.x).toBeCloseTo(wrapperBox.x, 0);
+ expect(pageBox.y).toBeCloseTo(wrapperBox.y, 0);
+ expect(pageBox.height).toBeGreaterThan(0);
+
+ // The title drifting down the viewport is the reported symptom, so it
+ // has to come to rest against the top of the modal.
+ const titleBox = (await arrived.locator('ion-title').boundingBox())!;
+ expect(titleBox.y).toBeCloseTo(wrapperBox.y, 0);
+
+ // Going back has to land the same way, since the pop animates too.
+ await page.locator('ion-modal ion-nav').evaluate((nav: HTMLIonNavElement) => nav.pop());
+
+ await expect(page.locator('ion-modal nav-page-one ion-title')).toBeVisible();
+ await expect(arrived).toBeHidden();
+ expect((await page.locator('ion-modal nav-page-one').boundingBox())!.x).toBeCloseTo(wrapperBox.x, 0);
+ });
+
test('should respect a --height set on the modal at runtime', async ({ page }) => {
await page.setContent(contentModal(''), config);
await expect(page.locator('ion-modal')).toBeVisible();
diff --git a/core/src/css/core.scss b/core/src/css/core.scss
index c70988e8ad9..b68ff4d3ae6 100644
--- a/core/src/css/core.scss
+++ b/core/src/css/core.scss
@@ -219,8 +219,8 @@ ion-modal > .ion-page {
* to take its height from its page and size itself correctly. Without
* this, the modal will not appear as the nav will be 0 height.
*/
-ion-content.content-sizing ion-nav,
-ion-content.content-sizing ion-nav > .ion-page {
+ion-modal ion-content.content-sizing ion-nav,
+ion-modal ion-content.content-sizing ion-nav > .ion-page {
position: relative;
contain: layout style;
@@ -234,11 +234,11 @@ ion-content.content-sizing ion-nav > .ion-page {
* this, a transition that has two pages in the tree at once would
* render them one below the other.
*/
-ion-content.content-sizing ion-nav {
+ion-modal ion-content.content-sizing ion-nav {
display: grid;
}
-ion-content.content-sizing ion-nav > .ion-page {
+ion-modal ion-content.content-sizing ion-nav > .ion-page {
grid-row: 1;
grid-column: 1;
}
From 7277c15da5fa5a89c207a0b6415e740cc46d689d Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Wed, 9 Sep 2026 15:06:16 -0400
Subject: [PATCH 16/18] test(modal): turn off animations for all modals
---
.../modal/test/content-height/modal.e2e.ts | 31 ++++++++++++-------
1 file changed, 20 insertions(+), 11 deletions(-)
diff --git a/core/src/components/modal/test/content-height/modal.e2e.ts b/core/src/components/modal/test/content-height/modal.e2e.ts
index 6897825423f..01608a1c4ae 100644
--- a/core/src/components/modal/test/content-height/modal.e2e.ts
+++ b/core/src/components/modal/test/content-height/modal.e2e.ts
@@ -16,7 +16,15 @@ const TALL_CHILD_HEIGHT = 2000;
*/
const REMOUNT_TIMEOUT = 100;
+/**
+ * `setContent` has animations enabled by default, so `toBeVisible()` resolves as
+ * the modal starts animating in and everything after it is measured
+ * mid-animation. This turns animations off for each modal.
+ */
+const DISABLE_ANIMATIONS = ``;
+
const contentModal = (style: string, childHeight = CHILD_HEIGHT) => `
+ ${DISABLE_ANIMATIONS}
${NAV_MODAL}`, config);
await presentNavModal(page);
- const tops = await page.locator('ion-modal ion-nav').evaluate(async (nav: any) => {
- nav.push('nav-page-two');
+ const tops = await page.locator('ion-modal ion-nav').evaluate(async (nav: HTMLIonNavElement) => {
+ const pushed = nav.push('nav-page-two');
/**
- * A page that has been hidden reports a zero rect, so only pages with
- * a real box count. Sampled per frame because the window where both
- * are laid out lasts only as long as the slide.
+ * Both pages are in the tree from the first frame of the transition,
+ * which runs for around half a second, so one frame is enough to
+ * catch them together. A page that has been hidden reports a zero
+ * rect, so only pages with a real box count.
*/
- for (let i = 0; i < 60; i++) {
- await new Promise((resolve) => requestAnimationFrame(resolve));
+ await new Promise((resolve) => requestAnimationFrame(resolve));
+ const laidOut = Array.from(nav.children).filter((child) => child.getBoundingClientRect().height > 0);
+ const tops = laidOut.map((child) => Math.round(child.getBoundingClientRect().top));
- const laidOut = Array.from(nav.children).filter((c: any) => c.getBoundingClientRect().height > 0);
- if (laidOut.length > 1) {
- return laidOut.map((c: any) => Math.round(c.getBoundingClientRect().top));
- }
- }
+ // Awaiting the push surfaces a rejected transition as a test failure.
+ await pushed;
- return [];
+ return tops;
});
// Both pages are laid out during the slide and must share an origin.
- expect(tops.length).toBeGreaterThan(1);
+ expect(tops).toHaveLength(2);
expect(new Set(tops).size).toBe(1);
});
/**
* Nav pages carried these properties once before, at `height: 100%`, and
- * it left titles animating to the wrong place (#25677, #25688). Verifying
- * that pages do not overlap is not enough on its own, so this covers
- * where the transition ends up.
+ * it left titles animating to the wrong place (#25677, #25688). This
+ * covers where a transition ends up, with the arriving page and its title
+ * resting against the modal.
*/
test('should settle a nav transition with the new page in place', async ({ page }) => {
await page.setContent(`${NAV_MODAL}`, config);
From 8bfd7d3c6f9fb5f012384022e9127542c3d1358e Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Wed, 9 Sep 2026 17:22:09 -0400
Subject: [PATCH 18/18] test(modal): cover both modes and add screenshots
---
.../modal/test/content-height/modal.e2e.ts | 70 +++++++++++++++---
...ight-basic-ios-ltr-Mobile-Chrome-linux.png | Bin 0 -> 5397 bytes
...ght-basic-ios-ltr-Mobile-Firefox-linux.png | Bin 0 -> 6357 bytes
...ight-basic-ios-ltr-Mobile-Safari-linux.png | Bin 0 -> 6382 bytes
...eight-basic-md-ltr-Mobile-Chrome-linux.png | Bin 0 -> 5743 bytes
...ight-basic-md-ltr-Mobile-Firefox-linux.png | Bin 0 -> 6209 bytes
...eight-basic-md-ltr-Mobile-Safari-linux.png | Bin 0 -> 6483 bytes
...height-nav-ios-ltr-Mobile-Chrome-linux.png | Bin 0 -> 6493 bytes
...eight-nav-ios-ltr-Mobile-Firefox-linux.png | Bin 0 -> 7518 bytes
...height-nav-ios-ltr-Mobile-Safari-linux.png | Bin 0 -> 7871 bytes
...-height-nav-md-ltr-Mobile-Chrome-linux.png | Bin 0 -> 6822 bytes
...height-nav-md-ltr-Mobile-Firefox-linux.png | Bin 0 -> 7433 bytes
...-height-nav-md-ltr-Mobile-Safari-linux.png | Bin 0 -> 8142 bytes
...t-overflow-ios-ltr-Mobile-Chrome-linux.png | Bin 0 -> 5375 bytes
...-overflow-ios-ltr-Mobile-Firefox-linux.png | Bin 0 -> 6358 bytes
...t-overflow-ios-ltr-Mobile-Safari-linux.png | Bin 0 -> 6688 bytes
...ht-overflow-md-ltr-Mobile-Chrome-linux.png | Bin 0 -> 5736 bytes
...t-overflow-md-ltr-Mobile-Firefox-linux.png | Bin 0 -> 6203 bytes
...ht-overflow-md-ltr-Mobile-Safari-linux.png | Bin 0 -> 6451 bytes
19 files changed, 58 insertions(+), 12 deletions(-)
create mode 100644 core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-basic-ios-ltr-Mobile-Chrome-linux.png
create mode 100644 core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-basic-ios-ltr-Mobile-Firefox-linux.png
create mode 100644 core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-basic-ios-ltr-Mobile-Safari-linux.png
create mode 100644 core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-basic-md-ltr-Mobile-Chrome-linux.png
create mode 100644 core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-basic-md-ltr-Mobile-Firefox-linux.png
create mode 100644 core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-basic-md-ltr-Mobile-Safari-linux.png
create mode 100644 core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-nav-ios-ltr-Mobile-Chrome-linux.png
create mode 100644 core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-nav-ios-ltr-Mobile-Firefox-linux.png
create mode 100644 core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-nav-ios-ltr-Mobile-Safari-linux.png
create mode 100644 core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-nav-md-ltr-Mobile-Chrome-linux.png
create mode 100644 core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-nav-md-ltr-Mobile-Firefox-linux.png
create mode 100644 core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-nav-md-ltr-Mobile-Safari-linux.png
create mode 100644 core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-overflow-ios-ltr-Mobile-Chrome-linux.png
create mode 100644 core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-overflow-ios-ltr-Mobile-Firefox-linux.png
create mode 100644 core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-overflow-ios-ltr-Mobile-Safari-linux.png
create mode 100644 core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-overflow-md-ltr-Mobile-Chrome-linux.png
create mode 100644 core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-overflow-md-ltr-Mobile-Firefox-linux.png
create mode 100644 core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-overflow-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/content-height/modal.e2e.ts b/core/src/components/modal/test/content-height/modal.e2e.ts
index b195875a0b3..6acc8b4b50e 100644
--- a/core/src/components/modal/test/content-height/modal.e2e.ts
+++ b/core/src/components/modal/test/content-height/modal.e2e.ts
@@ -31,8 +31,13 @@ const contentModal = (style: string, childHeight = CHILD_HEIGHT) => `
}
+
+
+ Modal
+
+
-
+
height: ${childHeight}px
`;
@@ -48,16 +53,28 @@ const NAV_MODAL = `
class NavPageOne extends HTMLElement {
connectedCallback() {
this.innerHTML = \`
- One
-
+
+
+ Modal - Nav - One
+
+
+
+
height: 120px
+
\`;
}
}
class NavPageTwo extends HTMLElement {
connectedCallback() {
this.innerHTML = \`
- Two
-
+
+
+ Modal - Nav - Two
+
+
+
+
height: 400px
+
\`;
}
}
@@ -131,9 +148,9 @@ const presentNavModal = async (page: E2EPage) => {
};
/**
- * This behavior does not vary across directions/modes
+ * This behavior does not vary across directions
*/
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
test.describe(title('modal: content height'), () => {
test.describe('content-based heights', () => {
/**
@@ -201,7 +218,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
// Content sizing should not be applied by default.
await expect(page.locator('ion-modal ion-content')).not.toHaveClass(/content-sizing/);
- await expect.poll(() => getContentHeight(page)).toBe(viewport.height);
+ await expect.poll(() => getWrapperHeight(page)).toBe(viewport.height);
});
test('should fill and scroll a pixel height', async ({ page }) => {
@@ -213,8 +230,10 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
await expect(page.locator('ion-modal ion-content')).not.toHaveClass(/content-sizing/);
await expect.poll(() => getWrapperHeight(page)).toBe(300);
+ // The scroll container takes what the header leaves of the modal.
+ const headerHeight = (await page.locator('ion-modal ion-header').boundingBox())!.height;
const { scrollHeight, clientHeight } = await getScrollMetrics(page);
- expect(clientHeight).toBe(300);
+ expect(clientHeight).toBe(300 - headerHeight);
expect(scrollHeight).toBeGreaterThan(clientHeight);
});
@@ -360,10 +379,16 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
expect(pageBox.y).toBeCloseTo(wrapperBox.y, 0);
expect(pageBox.height).toBeGreaterThan(0);
- // The title drifting down the viewport is the reported symptom, so it
- // has to come to rest against the top of the modal.
+ /**
+ * The title drifting down the viewport is the reported symptom, so the
+ * header has to sit at the top of the modal with the title inside it.
+ * Each mode insets the title by a different amount.
+ */
+ const headerBox = (await arrived.locator('ion-header').boundingBox())!;
const titleBox = (await arrived.locator('ion-title').boundingBox())!;
- expect(titleBox.y).toBeCloseTo(wrapperBox.y, 0);
+ expect(headerBox.y).toBeCloseTo(wrapperBox.y, 0);
+ expect(titleBox.y).toBeGreaterThanOrEqual(headerBox.y);
+ expect(titleBox.y + titleBox.height).toBeLessThanOrEqual(headerBox.y + headerBox.height + 1);
// Going back has to land the same way, since the pop animates too.
await page.locator('ion-modal ion-nav').evaluate((nav: HTMLIonNavElement) => nav.pop());
@@ -418,5 +443,26 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
await expect.poll(() => getWrapperHeight(page)).toBe(viewport.height);
});
});
+
+ test('should render a modal sized to its content', async ({ page }) => {
+ await page.setContent(contentModal('--height: fit-content;'), config);
+ await expect(page.locator('ion-modal')).toBeVisible();
+
+ await expect(page).toHaveScreenshot(screenshot('modal-content-height-basic'));
+ });
+
+ test('should render a content-sized modal whose content overflows', async ({ page }) => {
+ await page.setContent(contentModal('--height: fit-content;', TALL_CHILD_HEIGHT), config);
+ await expect(page.locator('ion-modal')).toBeVisible();
+
+ await expect(page).toHaveScreenshot(screenshot('modal-content-height-overflow'));
+ });
+
+ test('should render a content-sized modal with an ion-nav', async ({ page }) => {
+ await page.setContent(`${NAV_MODAL}`, config);
+ await presentNavModal(page);
+
+ await expect(page).toHaveScreenshot(screenshot('modal-content-height-nav'));
+ });
});
});
diff --git a/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-basic-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-basic-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..4b987641db4bb5ea5c470dc184f445d48b489050
GIT binary patch
literal 5397
zcmeHLX;{+P8prl!)M>n9iH-RrxaCG=*=p8JGa)5g
z6h$CK+?C35DG?_GN(I~!1x-x>Wxb~l^L_4ox%YXdujf4f_q^{pzvcbE*SrsT7%p40
z3<7}|dhT;S0)ZG@gFxm9mdpbyO0MN31oAD!)BQK!ga>27_)=l4wq=SNc-Y2tHFLe;
zzrJ1Z^u*UNd-sAL-)&ld
z$HCxQ#nOFGymtN&HSfC!liT~gZhgItuh{sL4rIYl+ub0@iJSi|Ee0&1s4nt`-RWbs
zG8(LA?)|AubJyhAvn}R=0iqYNaWqbxqO7TltQ)WN2_e`;9MS8vM2dC&(`%yfBompD;9c*~aK!axKiGa^ioPRd@K<=(uo4kuY@amRDPUgGS#D;B8<&8x#=
z@*SsMnH0rOXZ_-XvWo!+G|2fu-1`0usAv@w)63wvIyb;)hwj4j69%p=HQChV!F*^I
zHGn+i_%X}6arTj8Za(9#FkS>OOx6
zBiTdO#=Spbzq&N7F-5(V(Y}47$F2JQbTcPXHTRG+?}#!O$Nmy~y!`FfSnuTr7Pv~-Q1O`N(#ITRDk()#(|2+CEmze@nvqlZNM}K8
zxzIg4+yvPj{y1aH-hkkXguTVX;)s3qVpg_?bttv
zF}jz-^Ps=hPrl5vi01hP@DjPx95?aBQCp0v5WUEqjkcva&vfp#+{RMz=%~;3Ja%@$
zaNl^97(QDO8Z?X_~
zH^VV6ekE)_v!A-!3-G(_wW&-%M=H&>z?kiJ;hhg79B8Q;@W>Ry#_rXTFDk-KZnr)#
z`s?14LclMC?aV@q>*?<2*AB=0saSu*z~vF_T5#(LZ?b*?#o^JW)bcl5mT#@@^9u;E
z=Q@X}SJ>KMdaJ?Zg7U;jG?lsNn^iVE9^mT)sGGFo>_BJ1?wmkW@v+)v?PnRbn8eR*
zn=SB~DSoM$UAVXM=l14}qU34zd}Ehqh#=TBpmkJre>#O$D+SnY?7`Go)s2-45J^!I
z!<^vgHh`8|5FDA%fBCIdRj`mhO?e*BkIv)f0o{7+k%`f^lI1MxJ4)kCtMzO=UcN^8Hq!ih>
z=jOZ^^>`I$W(8Cj!+l?NO7;+ep7Hfz@!NZ21tECNpv9L;oIY`jI9FF}lvdRO`VuMf
zUP8nt5SQH}j2EXATsAF{D2AlDK$!+JpsBh!Nw%=b$hj1^Ljk0SPZu03dz|U20%8(3Q~vect~+2Cs}IY1mfJs>@BS*3e{oI!v)xjQjEu&
zcgb9)+ijzVTAf@!w{8Th98@RBqgPv%hq_Ez7eW_nKgAQPkn@PbrrhtvaIw18{a)oA^L*FL2wA3VUr*Zpm
zb+Jx~zhWLowmzL6q0vkXXmto~Axq=v{40(Fi#HEoZLwg|?6~6kb%7=oz)f;kb8IZZmiMaI
z|HZwdC$A-9;Iw;$r$C2XtF)T5pUz=)$^BD`K35-()#y~=)X
zc)$2Vqz~0n04Z=30l}9t)AzA^fOSLxrwvIQeJV@1u+Vfz-}(8px=*#Ct0-~1Thz{*vXP??ws54hn!*pf*a
z)-wB;z)rBh0jabl4&6^zZ9D0na(vGdemD9)<3lKs7kET_5?0eK4Rr1~o@R)OAQ$BBNS?lw~%gmYOhs)Q2;RPL%ZXIH?LoH;b}?lcE$tlV>M^%8}D;srr0_
z`HM=c2d;C!;U1*(ml14UthKwM98LUme!dZT&p@b(D^*!a18p!Yt^QGAG;^_F-f#u|
z_d`%0`;%WJ7Hw5in93v!a`5LX^`S&aVGB$7-CuXr|J9$5K*9JH0$I@bWft)NpY1;&
zLox?=`rrBS`#MGWI#c>bj?qT&1`vo|e?Pu^1`IbBeNnRckmv<5_E8Po7_b8I+;hmC
Jw(I!C{{X_U*)sqD
literal 0
HcmV?d00001
diff --git a/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-basic-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-basic-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..f7908d0d9b62bd664d8272ee6b80f7c53122adfd
GIT binary patch
literal 6357
zcmeHMX;_l!{$_HrX;B+JmTB2srgh5H9CH~{sN8Tg_a#>>Cre2wS6qNG+Z;2-sY%PN
za?A}OQy>>mr^N~tO^^hY)XaqtQ32%@IImsjr>eF*w@AbUz^Ly^+{@wTe
zK(3FMo5m*nO%Mn~!yWGI2Z4N(3xTZTe5VdRK{vEjK_Gf1?#{;o(2>HCjVxjGh)OId
zI{r`pSGT*PuLikn+TpaZz|*9u`Y$8Xiis187
zC66qnm5-$NR@vcUBa)1I_Uvf8qE+PBG$+ltVuPpfA8{yorj<hb!wk!4BDV@2M_L^+$Ym>rHu=13_ka#jXsQ3c2J$2|zAvrK8q*9e7
zezBc8S%|>??Km$wVXS9$Ks%}Tr>XgsxrQ#ocoI#jKWgp`QzVD|QsBZJN#l>8P~bO&
zulC?eE{Ih5@OeHQd};5^=ix~`?1Yw?M>gyLe+_(T*23%fJTr>kXjy=^T&HgZt}nh&bEl;ew=>pzVfUm5h?6IN3W!AOSiDN
zno91{fH$m-?|G@==g(_7|D;@=;9WIHuxq3B+6$UCn?H?0XCBsOI?BQgVA!m3jDz%D
zv`+82_!qjtpQa8r^&Ni}y*(n?7vEE^T&lvh#_YSc8;cH$&bO8e`{5CW}r&%+cm-az;1?DgBu1&3dBDNg0a@|?6B
zS=++SH%O-|@KPGSvM{oRX&)D3dHv-N+SK7h4_tQ(>WXgAG>&SNGF6%;-SH}g6TvBO
zgdYmZ{WkjLIpYIcd8l>_EXd&9W{b89s>6t4))7%#QtQgcV&EuLKbN~iG`$@JLYOL_
zsgj+k^)PS#tDY{ORVZ^b?W=`PCvGa*VZabm8r@}>dA?l3LBjHP^qeY5@`6FHJ3D&0
zoVpkLXvPY^zp5lruP$*scOM0$qPMYLqw^)p=)>C9@N$fFNcg*xX6zARlRxilIY!=n
zzqeUFTgOXi6-u=Vo(hPqR~hcs74N`vy++Dxp1gy!9lqei%MjG_zIWT%PXQ;U4qxn&
z47v1ts~#8gWUfUZE#FX}SFQLBNup8Qrj>vQ1=0lt!?Jwc$UQbZ&wsB!4rfi0$b_ZY
z;Pw__^Hf=UVMJ;ylGq#r)-oWkQuV{bu`828Aqoe~r@3udCUYWNBhX`4FzpXw^bF2F
zK6XSloW%Rtw4T)qqBfRZVRgBak6s?T25fnFr+%-Cv7TUUo8U4(M0osUebn1g!os*$
z-+3^Iz$sL^xm=GToN@&a4GQg{K8W91g%lna+zwCEajB2~A$h6ajS5!PYOzm)m{oh1
z;c5`i!WlYXuhiHy34VKYkIkYxn?-9Fdi;AGzXCfDejw57ZrW%%P+3p5ICRnY=LmWz
z<2bo3Aak=-uU&NekFg9h>L;1jxUVV#&_AP6$V4zsOlpKnph4f6aX6cqLSX3z>y{X4
z-$*g)EV8VDJ1llvDUNI*Px$~4@^;_7y1C$oDp1hEyJyRqamxv|;Ckqp%=c1>NFe*RHgs#XR_-!8H#4W#ns4
zTY5_mZyF3mN*D+R_@EbD606G+Qu(7OPM|yaa)9ba7ooA&evB{}{TMvJCB|vfou;I=
z#P-Cvaf^XKpSTL(w!ha5|5q}qteuI`F)NsdxPP0V@^Nnyf@+R
zfP$h^S9e_P+FMC432wYL1X2#YMX7WBTSx&MvNiX=9`ak4$Meb!M%VrN{X|)vs_Gw*
zqHn)YuK$C+XZRX5Frh%xnsQ-gJP`VZ#XIp(`MEHRgv|q4HcS~#WQ>V%lPrJl_=zq&
z3M^kb|4wBwRgS{~Y!a6Js5qg80_q^e1(Yc?zXPF?bEJ*s3W7pPZIAabBL{?m(#