diff --git a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-ios-ltr-Mobile-Firefox-linux.png index e6773e2668..fe762ae26f 100644 Binary files a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-ios-rtl-Mobile-Firefox-linux.png index fc163fede9..cc76bf4179 100644 Binary files a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/header/header.ios.scss b/core/src/components/header/header.ios.scss index 7c1211b6af..56ab147a72 100644 --- a/core/src/components/header/header.ios.scss +++ b/core/src/components/header/header.ios.scss @@ -51,8 +51,6 @@ } .header-collapse-condense ion-toolbar:first-of-type { - padding-top: 1px; - z-index: 1; } diff --git a/core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-initial-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-initial-diff-ios-ltr-Mobile-Firefox-linux.png index 846927beb3..87f03054df 100644 Binary files a/core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-initial-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-initial-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/title/test/a11y/title.e2e.ts b/core/src/components/title/test/a11y/title.e2e.ts new file mode 100644 index 0000000000..7b799aa4b3 --- /dev/null +++ b/core/src/components/title/test/a11y/title.e2e.ts @@ -0,0 +1,76 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('title: font scaling'), () => { + test('should scale default title text on larger font sizes', async ({ page }) => { + await page.setContent( + ` + + + + Title + + + `, + config + ); + + const title = page.locator('ion-title'); + + await expect(title).toHaveScreenshot(screenshot(`title-default-scale`)); + }); + + test('should scale small title text on larger font sizes', async ({ page }) => { + await page.setContent( + ` + + + + Title + + + `, + config + ); + + const title = page.locator('ion-title'); + + await expect(title).toHaveScreenshot(screenshot(`title-small-scale`)); + }); + }); +}); + +configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('title: font scaling for large attribute'), () => { + test('should scale text on larger font sizes', async ({ page }) => { + await page.setContent( + ` + + + + Title + + + `, + config + ); + + const title = page.locator('ion-title'); + + await expect(title).toHaveScreenshot(screenshot(`title-large-scale`)); + }); + }); +}); diff --git a/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-default-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-default-scale-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..ac0ce69bfc Binary files /dev/null and b/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-default-scale-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-default-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-default-scale-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..b9b5e59954 Binary files /dev/null and b/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-default-scale-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-default-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-default-scale-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..5359c8ab5a Binary files /dev/null and b/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-default-scale-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-default-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-default-scale-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..dac22f28b1 Binary files /dev/null and b/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-default-scale-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-default-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-default-scale-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..82eabe87c3 Binary files /dev/null and b/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-default-scale-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-default-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-default-scale-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..8fef3a8fe5 Binary files /dev/null and b/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-default-scale-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-large-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-large-scale-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..8e7d433dcc Binary files /dev/null and b/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-large-scale-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-large-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-large-scale-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..5492907f3b Binary files /dev/null and b/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-large-scale-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-large-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-large-scale-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..19a228cb13 Binary files /dev/null and b/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-large-scale-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-small-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-small-scale-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..6bc584a0b1 Binary files /dev/null and b/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-small-scale-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-small-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-small-scale-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..a4d8b5804d Binary files /dev/null and b/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-small-scale-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-small-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-small-scale-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..86d09d1d89 Binary files /dev/null and b/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-small-scale-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-small-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-small-scale-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..7233e1c626 Binary files /dev/null and b/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-small-scale-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-small-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-small-scale-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..dedc07f911 Binary files /dev/null and b/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-small-scale-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-small-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-small-scale-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..8d294c54ae Binary files /dev/null and b/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-small-scale-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-characters-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-characters-ios-ltr-Mobile-Chrome-linux.png index 3de472c05a..d83228c5f0 100644 Binary files a/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-characters-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-characters-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-characters-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-characters-ios-ltr-Mobile-Firefox-linux.png index e2e6f53f2c..1f1a530860 100644 Binary files a/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-characters-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-characters-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-characters-ios-ltr-Mobile-Safari-linux.png b/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-characters-ios-ltr-Mobile-Safari-linux.png index d619c78d05..06d4a324ff 100644 Binary files a/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-characters-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-characters-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/title/title.ios.scss b/core/src/components/title/title.ios.scss index a993c94787..2e9feabb30 100644 --- a/core/src/components/title/title.ios.scss +++ b/core/src/components/title/title.ios.scss @@ -14,7 +14,7 @@ transform: translateZ(0); - font-size: 17px; + font-size: dynamic-font-max(17px, 1.2); font-weight: 600; text-align: center; @@ -31,7 +31,7 @@ position: relative; - font-size: 13px; + font-size: dynamic-font-max(13px, 1.8); font-weight: normal; } @@ -40,16 +40,17 @@ // -------------------------------------------------- :host(.title-large) { - @include padding(0, 16px); + @include padding(2px, 12px, 4px, 12px); @include transform-origin(left, center); - bottom: 0; + position: static; align-items: flex-end; min-width: 100%; - font-size: 34px; + font-size: dynamic-font-max(34px, 1.8); + font-weight: 700; text-align: start; diff --git a/core/src/components/title/title.md.scss b/core/src/components/title/title.md.scss index c72d95d2ee..8016db78e8 100644 --- a/core/src/components/title/title.md.scss +++ b/core/src/components/title/title.md.scss @@ -6,7 +6,7 @@ :host { @include padding(0, 20px); - font-size: 20px; + font-size: dynamic-font(20px); font-weight: 500; letter-spacing: .0125em; @@ -20,7 +20,7 @@ width: 100%; height: 100%; - font-size: 15px; + font-size: dynamic-font(15px); font-weight: normal; } diff --git a/core/src/components/toolbar/toolbar.ios.scss b/core/src/components/toolbar/toolbar.ios.scss index a9ef44f0b4..7f3a1ed267 100644 --- a/core/src/components/toolbar/toolbar.ios.scss +++ b/core/src/components/toolbar/toolbar.ios.scss @@ -79,16 +79,6 @@ // Toolbar: Large Title // -------------------------------------------------- -/** - * Ensure there is enough spacing between the large - * title and any potential content in subsequent - * toolbars. We do not add padding to the title - * itself because it is absolutely positioned. - */ -:host(.toolbar-title-large) { - padding-bottom: 7px; -} - :host(.toolbar-title-large) .toolbar-container { flex-wrap: wrap; align-items: flex-start; diff --git a/core/src/utils/transition/ios.transition.ts b/core/src/utils/transition/ios.transition.ts index 3145564e21..6b64adfbac 100644 --- a/core/src/utils/transition/ios.transition.ts +++ b/core/src/utils/transition/ios.transition.ts @@ -225,10 +225,10 @@ const animateLargeTitle = ( const BACKWARDS_KEYFRAMES = [ { offset: 0, opacity: 0, transform: `translate3d(${START_TRANSLATE}, ${backButtonBox.top - 4}px, 0) scale(0.49)` }, { offset: 0.1, opacity: 0 }, - { offset: 1, opacity: 1, transform: `translate3d(0, ${largeTitleBox.top - 2}px, 0) scale(1)` }, + { offset: 1, opacity: 1, transform: `translate3d(0, ${largeTitleBox.top + 2}px, 0) scale(1)` }, ]; const FORWARDS_KEYFRAMES = [ - { offset: 0, opacity: 0.99, transform: `translate3d(0, ${largeTitleBox.top - 2}px, 0) scale(1)` }, + { offset: 0, opacity: 0.99, transform: `translate3d(0, ${largeTitleBox.top + 2}px, 0) scale(1)` }, { offset: 0.6, opacity: 0 }, { offset: 1, opacity: 0, transform: `translate3d(${START_TRANSLATE}, ${backButtonBox.top - 4}px, 0) scale(0.5)` }, ]; @@ -253,10 +253,10 @@ const animateLargeTitle = ( [ORIGIN_X]: TITLE_START_OFFSET, }) .beforeAddWrite(() => { - largeTitleEl.style.setProperty('display', 'none'); + largeTitleEl.style.setProperty('opacity', '0'); }) .afterAddWrite(() => { - largeTitleEl.style.setProperty('display', ''); + largeTitleEl.style.setProperty('opacity', ''); clonedTitleEl.style.setProperty('display', 'none'); }) .keyframes(KEYFRAMES);