Skip to content

refactor(core): use Capacitor safe-area CSS variables on older WebViews #17837

refactor(core): use Capacitor safe-area CSS variables on older WebViews

refactor(core): use Capacitor safe-area CSS variables on older WebViews #17837

Triggered via pull request December 18, 2025 16:28
Status Failure
Total duration 11m 29s
Artifacts 8

build.yml

on: pull_request
build-react
46s
build-react
build-vue
38s
build-vue
Matrix: test-core-screenshot
build-angular
1m 7s
build-angular
build-angular-server
37s
build-angular-server
test-core-clean-build
16s
test-core-clean-build
test-core-lint
58s
test-core-lint
test-core-spec
51s
test-core-spec
build-react-router
27s
build-react-router
build-vue-router
39s
build-vue-router
verify-screenshots
2s
verify-screenshots
Matrix: test-angular-e2e
Matrix: test-react-e2e
Matrix: test-react-router-e2e
Matrix: test-vue-e2e
verify-test-angular-e2e
4s
verify-test-angular-e2e
verify-test-react-e2e
4s
verify-test-react-e2e
verify-test-react-router-e2e
3s
verify-test-react-router-e2e
verify-test-vue-e2e
3s
verify-test-vue-e2e
Fit to window
Zoom out
Zoom in

Annotations

68 errors, 4 warnings, and 1 notice
[Mobile Chrome] › src/components/app/test/safe-area/app.e2e.ts:33:9 › app: safe-area - ionic/md/ltr/light › should not have visual regressions with toast: src/components/app/test/safe-area/app.e2e.ts#L19
4) [Mobile Chrome] › src/components/app/test/safe-area/app.e2e.ts:33:9 › app: safe-area - ionic/md/ltr/light › should not have visual regressions with toast Error: expect(page).toHaveScreenshot(expected) failed 77094 pixels (ratio 0.27 of all image pixels) are different. Snapshot: app-toast-diff-ionic-md-ltr-light.png Call log: - Expect "toHaveScreenshot(app-toast-diff-ionic-md-ltr-light.png)" with timeout 5000ms - verifying given screenshot expectation - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - 77094 pixels (ratio 0.27 of all image pixels) are different. - waiting 100ms before taking screenshot - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - captured a stable screenshot - 77094 pixels (ratio 0.27 of all image pixels) are different. 17 | await page.waitForChanges(); 18 | > 19 | await expect(page).toHaveScreenshot(screenshot(`app-${screenshotModifier}-diff`)); | ^ 20 | }; 21 | test.beforeEach(async ({ page }) => { 22 | await page.goto(`/src/components/app/test/safe-area`, config); at testOverlay (/ionic/src/components/app/test/safe-area/app.e2e.ts:19:26) at /ionic/src/components/app/test/safe-area/app.e2e.ts:34:7
[Mobile Chrome] › src/components/app/test/safe-area/app.e2e.ts:30:9 › app: safe-area - ionic/md/ltr/light › should not have visual regressions with picker: src/components/app/test/safe-area/app.e2e.ts#L19
3) [Mobile Chrome] › src/components/app/test/safe-area/app.e2e.ts:30:9 › app: safe-area - ionic/md/ltr/light › should not have visual regressions with picker Retry #2 ─────────────────────────────────────────────────────────────────────────────────────── Error: expect(page).toHaveScreenshot(expected) failed 274789 pixels (ratio 0.97 of all image pixels) are different. Snapshot: app-picker-diff-ionic-md-ltr-light.png Call log: - Expect "toHaveScreenshot(app-picker-diff-ionic-md-ltr-light.png)" with timeout 5000ms - verifying given screenshot expectation - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - 274789 pixels (ratio 0.97 of all image pixels) are different. - waiting 100ms before taking screenshot - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - captured a stable screenshot - 274789 pixels (ratio 0.97 of all image pixels) are different. 17 | await page.waitForChanges(); 18 | > 19 | await expect(page).toHaveScreenshot(screenshot(`app-${screenshotModifier}-diff`)); | ^ 20 | }; 21 | test.beforeEach(async ({ page }) => { 22 | await page.goto(`/src/components/app/test/safe-area`, config); at testOverlay (/ionic/src/components/app/test/safe-area/app.e2e.ts:19:26) at /ionic/src/components/app/test/safe-area/app.e2e.ts:31:7
[Mobile Chrome] › src/components/app/test/safe-area/app.e2e.ts:30:9 › app: safe-area - ionic/md/ltr/light › should not have visual regressions with picker: src/components/app/test/safe-area/app.e2e.ts#L19
3) [Mobile Chrome] › src/components/app/test/safe-area/app.e2e.ts:30:9 › app: safe-area - ionic/md/ltr/light › should not have visual regressions with picker Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── Error: expect(page).toHaveScreenshot(expected) failed 274789 pixels (ratio 0.97 of all image pixels) are different. Snapshot: app-picker-diff-ionic-md-ltr-light.png Call log: - Expect "toHaveScreenshot(app-picker-diff-ionic-md-ltr-light.png)" with timeout 5000ms - verifying given screenshot expectation - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - 274789 pixels (ratio 0.97 of all image pixels) are different. - waiting 100ms before taking screenshot - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - captured a stable screenshot - 274789 pixels (ratio 0.97 of all image pixels) are different. 17 | await page.waitForChanges(); 18 | > 19 | await expect(page).toHaveScreenshot(screenshot(`app-${screenshotModifier}-diff`)); | ^ 20 | }; 21 | test.beforeEach(async ({ page }) => { 22 | await page.goto(`/src/components/app/test/safe-area`, config); at testOverlay (/ionic/src/components/app/test/safe-area/app.e2e.ts:19:26) at /ionic/src/components/app/test/safe-area/app.e2e.ts:31:7
[Mobile Chrome] › src/components/app/test/safe-area/app.e2e.ts:30:9 › app: safe-area - ionic/md/ltr/light › should not have visual regressions with picker: src/components/app/test/safe-area/app.e2e.ts#L19
3) [Mobile Chrome] › src/components/app/test/safe-area/app.e2e.ts:30:9 › app: safe-area - ionic/md/ltr/light › should not have visual regressions with picker Error: expect(page).toHaveScreenshot(expected) failed 274789 pixels (ratio 0.97 of all image pixels) are different. Snapshot: app-picker-diff-ionic-md-ltr-light.png Call log: - Expect "toHaveScreenshot(app-picker-diff-ionic-md-ltr-light.png)" with timeout 5000ms - verifying given screenshot expectation - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - 274789 pixels (ratio 0.97 of all image pixels) are different. - waiting 100ms before taking screenshot - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - captured a stable screenshot - 274789 pixels (ratio 0.97 of all image pixels) are different. 17 | await page.waitForChanges(); 18 | > 19 | await expect(page).toHaveScreenshot(screenshot(`app-${screenshotModifier}-diff`)); | ^ 20 | }; 21 | test.beforeEach(async ({ page }) => { 22 | await page.goto(`/src/components/app/test/safe-area`, config); at testOverlay (/ionic/src/components/app/test/safe-area/app.e2e.ts:19:26) at /ionic/src/components/app/test/safe-area/app.e2e.ts:31:7
[Mobile Chrome] › src/components/app/test/safe-area/app.e2e.ts:27:9 › app: safe-area - ionic/md/ltr/light › should not have visual regressions with menu: src/components/app/test/safe-area/app.e2e.ts#L19
2) [Mobile Chrome] › src/components/app/test/safe-area/app.e2e.ts:27:9 › app: safe-area - ionic/md/ltr/light › should not have visual regressions with menu Retry #2 ─────────────────────────────────────────────────────────────────────────────────────── Error: expect(page).toHaveScreenshot(expected) failed 19133 pixels (ratio 0.07 of all image pixels) are different. Snapshot: app-menu-diff-ionic-md-ltr-light.png Call log: - Expect "toHaveScreenshot(app-menu-diff-ionic-md-ltr-light.png)" with timeout 5000ms - verifying given screenshot expectation - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - 19133 pixels (ratio 0.07 of all image pixels) are different. - waiting 100ms before taking screenshot - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - captured a stable screenshot - 19133 pixels (ratio 0.07 of all image pixels) are different. 17 | await page.waitForChanges(); 18 | > 19 | await expect(page).toHaveScreenshot(screenshot(`app-${screenshotModifier}-diff`)); | ^ 20 | }; 21 | test.beforeEach(async ({ page }) => { 22 | await page.goto(`/src/components/app/test/safe-area`, config); at testOverlay (/ionic/src/components/app/test/safe-area/app.e2e.ts:19:26) at /ionic/src/components/app/test/safe-area/app.e2e.ts:28:7
[Mobile Chrome] › src/components/app/test/safe-area/app.e2e.ts:27:9 › app: safe-area - ionic/md/ltr/light › should not have visual regressions with menu: src/components/app/test/safe-area/app.e2e.ts#L19
2) [Mobile Chrome] › src/components/app/test/safe-area/app.e2e.ts:27:9 › app: safe-area - ionic/md/ltr/light › should not have visual regressions with menu Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── Error: expect(page).toHaveScreenshot(expected) failed 19133 pixels (ratio 0.07 of all image pixels) are different. Snapshot: app-menu-diff-ionic-md-ltr-light.png Call log: - Expect "toHaveScreenshot(app-menu-diff-ionic-md-ltr-light.png)" with timeout 5000ms - verifying given screenshot expectation - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - 19133 pixels (ratio 0.07 of all image pixels) are different. - waiting 100ms before taking screenshot - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - captured a stable screenshot - 19133 pixels (ratio 0.07 of all image pixels) are different. 17 | await page.waitForChanges(); 18 | > 19 | await expect(page).toHaveScreenshot(screenshot(`app-${screenshotModifier}-diff`)); | ^ 20 | }; 21 | test.beforeEach(async ({ page }) => { 22 | await page.goto(`/src/components/app/test/safe-area`, config); at testOverlay (/ionic/src/components/app/test/safe-area/app.e2e.ts:19:26) at /ionic/src/components/app/test/safe-area/app.e2e.ts:28:7
[Mobile Chrome] › src/components/app/test/safe-area/app.e2e.ts:27:9 › app: safe-area - ionic/md/ltr/light › should not have visual regressions with menu: src/components/app/test/safe-area/app.e2e.ts#L19
2) [Mobile Chrome] › src/components/app/test/safe-area/app.e2e.ts:27:9 › app: safe-area - ionic/md/ltr/light › should not have visual regressions with menu Error: expect(page).toHaveScreenshot(expected) failed 19133 pixels (ratio 0.07 of all image pixels) are different. Snapshot: app-menu-diff-ionic-md-ltr-light.png Call log: - Expect "toHaveScreenshot(app-menu-diff-ionic-md-ltr-light.png)" with timeout 5000ms - verifying given screenshot expectation - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - 19133 pixels (ratio 0.07 of all image pixels) are different. - waiting 100ms before taking screenshot - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - captured a stable screenshot - 19133 pixels (ratio 0.07 of all image pixels) are different. 17 | await page.waitForChanges(); 18 | > 19 | await expect(page).toHaveScreenshot(screenshot(`app-${screenshotModifier}-diff`)); | ^ 20 | }; 21 | test.beforeEach(async ({ page }) => { 22 | await page.goto(`/src/components/app/test/safe-area`, config); at testOverlay (/ionic/src/components/app/test/safe-area/app.e2e.ts:19:26) at /ionic/src/components/app/test/safe-area/app.e2e.ts:28:7
[Mobile Chrome] › src/components/app/test/safe-area/app.e2e.ts:24:9 › app: safe-area - ionic/md/ltr/light › should not have visual regressions with action sheet: src/components/app/test/safe-area/app.e2e.ts#L19
1) [Mobile Chrome] › src/components/app/test/safe-area/app.e2e.ts:24:9 › app: safe-area - ionic/md/ltr/light › should not have visual regressions with action sheet Retry #2 ─────────────────────────────────────────────────────────────────────────────────────── Error: expect(page).toHaveScreenshot(expected) failed 149942 pixels (ratio 0.53 of all image pixels) are different. Snapshot: app-action-sheet-diff-ionic-md-ltr-light.png Call log: - Expect "toHaveScreenshot(app-action-sheet-diff-ionic-md-ltr-light.png)" with timeout 5000ms - verifying given screenshot expectation - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - 149942 pixels (ratio 0.53 of all image pixels) are different. - waiting 100ms before taking screenshot - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - captured a stable screenshot - 149942 pixels (ratio 0.53 of all image pixels) are different. 17 | await page.waitForChanges(); 18 | > 19 | await expect(page).toHaveScreenshot(screenshot(`app-${screenshotModifier}-diff`)); | ^ 20 | }; 21 | test.beforeEach(async ({ page }) => { 22 | await page.goto(`/src/components/app/test/safe-area`, config); at testOverlay (/ionic/src/components/app/test/safe-area/app.e2e.ts:19:26) at /ionic/src/components/app/test/safe-area/app.e2e.ts:25:7
[Mobile Chrome] › src/components/app/test/safe-area/app.e2e.ts:24:9 › app: safe-area - ionic/md/ltr/light › should not have visual regressions with action sheet: src/components/app/test/safe-area/app.e2e.ts#L19
1) [Mobile Chrome] › src/components/app/test/safe-area/app.e2e.ts:24:9 › app: safe-area - ionic/md/ltr/light › should not have visual regressions with action sheet Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── Error: expect(page).toHaveScreenshot(expected) failed 149942 pixels (ratio 0.53 of all image pixels) are different. Snapshot: app-action-sheet-diff-ionic-md-ltr-light.png Call log: - Expect "toHaveScreenshot(app-action-sheet-diff-ionic-md-ltr-light.png)" with timeout 5000ms - verifying given screenshot expectation - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - 149942 pixels (ratio 0.53 of all image pixels) are different. - waiting 100ms before taking screenshot - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - captured a stable screenshot - 149942 pixels (ratio 0.53 of all image pixels) are different. 17 | await page.waitForChanges(); 18 | > 19 | await expect(page).toHaveScreenshot(screenshot(`app-${screenshotModifier}-diff`)); | ^ 20 | }; 21 | test.beforeEach(async ({ page }) => { 22 | await page.goto(`/src/components/app/test/safe-area`, config); at testOverlay (/ionic/src/components/app/test/safe-area/app.e2e.ts:19:26) at /ionic/src/components/app/test/safe-area/app.e2e.ts:25:7
[Mobile Chrome] › src/components/app/test/safe-area/app.e2e.ts:24:9 › app: safe-area - ionic/md/ltr/light › should not have visual regressions with action sheet: src/components/app/test/safe-area/app.e2e.ts#L19
1) [Mobile Chrome] › src/components/app/test/safe-area/app.e2e.ts:24:9 › app: safe-area - ionic/md/ltr/light › should not have visual regressions with action sheet Error: expect(page).toHaveScreenshot(expected) failed 149942 pixels (ratio 0.53 of all image pixels) are different. Snapshot: app-action-sheet-diff-ionic-md-ltr-light.png Call log: - Expect "toHaveScreenshot(app-action-sheet-diff-ionic-md-ltr-light.png)" with timeout 5000ms - verifying given screenshot expectation - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - 149942 pixels (ratio 0.53 of all image pixels) are different. - waiting 100ms before taking screenshot - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - captured a stable screenshot - 149942 pixels (ratio 0.53 of all image pixels) are different. 17 | await page.waitForChanges(); 18 | > 19 | await expect(page).toHaveScreenshot(screenshot(`app-${screenshotModifier}-diff`)); | ^ 20 | }; 21 | test.beforeEach(async ({ page }) => { 22 | await page.goto(`/src/components/app/test/safe-area`, config); at testOverlay (/ionic/src/components/app/test/safe-area/app.e2e.ts:19:26) at /ionic/src/components/app/test/safe-area/app.e2e.ts:25:7
test-core-screenshot (5, 20)
The strategy configuration was canceled because "test-core-screenshot._7_20" failed
test-core-screenshot (5, 20)
Process completed with exit code 12.
test-core-screenshot (5, 20)
The operation was canceled.
test-core-screenshot (17, 20)
The strategy configuration was canceled because "test-core-screenshot._7_20" failed
test-core-screenshot (17, 20)
Process completed with exit code 12.
test-core-screenshot (17, 20)
The operation was canceled.
test-core-screenshot (15, 20)
The strategy configuration was canceled because "test-core-screenshot._7_20" failed
test-core-screenshot (15, 20)
Process completed with exit code 12.
test-core-screenshot (15, 20)
The operation was canceled.
test-core-screenshot (2, 20)
The strategy configuration was canceled because "test-core-screenshot._7_20" failed
test-core-screenshot (2, 20)
Process completed with exit code 12.
test-core-screenshot (2, 20)
The operation was canceled.
test-core-screenshot (11, 20)
The strategy configuration was canceled because "test-core-screenshot._7_20" failed
test-core-screenshot (11, 20)
Process completed with exit code 12.
test-core-screenshot (11, 20)
The operation was canceled.
test-core-screenshot (20, 20)
The strategy configuration was canceled because "test-core-screenshot._7_20" failed
test-core-screenshot (20, 20)
Process completed with exit code 12.
test-core-screenshot (20, 20)
The operation was canceled.
test-core-screenshot (18, 20)
The strategy configuration was canceled because "test-core-screenshot._7_20" failed
test-core-screenshot (18, 20)
Process completed with exit code 12.
test-core-screenshot (18, 20)
The operation was canceled.
test-core-screenshot (16, 20)
The strategy configuration was canceled because "test-core-screenshot._7_20" failed
test-core-screenshot (16, 20)
Process completed with exit code 12.
test-core-screenshot (16, 20)
The operation was canceled.
test-core-screenshot (9, 20)
The strategy configuration was canceled because "test-core-screenshot._7_20" failed
test-core-screenshot (9, 20)
Process completed with exit code 12.
test-core-screenshot (9, 20)
The operation was canceled.
test-core-screenshot (6, 20)
The strategy configuration was canceled because "test-core-screenshot._7_20" failed
test-core-screenshot (6, 20)
Process completed with exit code 12.
test-core-screenshot (6, 20)
The operation was canceled.
test-core-screenshot (13, 20)
The strategy configuration was canceled because "test-core-screenshot._7_20" failed
test-core-screenshot (13, 20)
Process completed with exit code 12.
test-core-screenshot (13, 20)
The operation was canceled.
test-core-screenshot (8, 20)
The strategy configuration was canceled because "test-core-screenshot._7_20" failed
test-core-screenshot (8, 20)
Process completed with exit code 12.
test-core-screenshot (8, 20)
The operation was canceled.
test-core-screenshot (19, 20)
The strategy configuration was canceled because "test-core-screenshot._7_20" failed
test-core-screenshot (19, 20)
Process completed with exit code 12.
test-core-screenshot (19, 20)
The operation was canceled.
test-core-screenshot (1, 20)
The strategy configuration was canceled because "test-core-screenshot._7_20" failed
test-core-screenshot (1, 20)
Process completed with exit code 12.
test-core-screenshot (1, 20)
The operation was canceled.
test-core-screenshot (3, 20)
The strategy configuration was canceled because "test-core-screenshot._7_20" failed
test-core-screenshot (3, 20)
Process completed with exit code 12.
test-core-screenshot (3, 20)
The operation was canceled.
test-core-screenshot (14, 20)
The strategy configuration was canceled because "test-core-screenshot._7_20" failed
test-core-screenshot (14, 20)
Process completed with exit code 12.
test-core-screenshot (14, 20)
The operation was canceled.
test-core-screenshot (4, 20)
The strategy configuration was canceled because "test-core-screenshot._7_20" failed
test-core-screenshot (4, 20)
Process completed with exit code 12.
test-core-screenshot (4, 20)
The operation was canceled.
test-core-screenshot (12, 20)
The strategy configuration was canceled because "test-core-screenshot._7_20" failed
test-core-screenshot (10, 20)
The strategy configuration was canceled because "test-core-screenshot._7_20" failed
test-core-screenshot (10, 20)
Process completed with exit code 12.
test-core-screenshot (12, 20)
Process completed with exit code 12.
test-core-screenshot (10, 20)
The operation was canceled.
test-core-screenshot (12, 20)
The operation was canceled.
verify-screenshots
Process completed with exit code 1.
build-core
Back off 10.84 seconds before retry.
build-core
Failed to download action 'https://api.github.com/repos/actions/upload-artifact/tarball/b7c566a772e6b6bfb58ed0dc250532a479d7789f'. Error: The request was canceled due to the configured HttpClient.Timeout of 100 seconds elapsing.
build-core
Back off 20.673 seconds before retry.
build-core
Failed to download action 'https://api.github.com/repos/actions/upload-artifact/tarball/b7c566a772e6b6bfb58ed0dc250532a479d7789f'. Error: The request was canceled due to the configured HttpClient.Timeout of 100 seconds elapsing.
🎭 Playwright Run Summary
4 failed [Mobile Chrome] › src/components/app/test/safe-area/app.e2e.ts:24:9 › app: safe-area - ionic/md/ltr/light › should not have visual regressions with action sheet [Mobile Chrome] › src/components/app/test/safe-area/app.e2e.ts:27:9 › app: safe-area - ionic/md/ltr/light › should not have visual regressions with menu [Mobile Chrome] › src/components/app/test/safe-area/app.e2e.ts:30:9 › app: safe-area - ionic/md/ltr/light › should not have visual regressions with picker [Mobile Chrome] › src/components/app/test/safe-area/app.e2e.ts:33:9 › app: safe-area - ionic/md/ltr/light › should not have visual regressions with toast 360 skipped 273 passed (2.6m)

Artifacts

Produced during runtime
Name Size Digest
ionic-angular
805 KB
sha256:2d2a2336ecc9462dca62ad6ebd46fe4207c5343756731da3e19c0c0de18cdb49
ionic-angular-server
8.55 KB
sha256:2c1b70f5164ec273f13f7479d7421cce673e4ded027e61fba0d119f5f89c4032
ionic-core
5.15 MB
sha256:4547c9c7b57fff01e7a2187964b83ef0199a49219751664a3ae6ba505dced59b
ionic-react
343 KB
sha256:23a1769373c94b95408b8e439b06c5215260fce63798fa2aac34051ee5ab391f
ionic-react-router
27.9 KB
sha256:9062d328112bda90bcbf552fedf4e0493cdf9c48ab8b5a0b2d55f71170ce6a30
ionic-vue
374 KB
sha256:7f44019bc3eedcf4baa9e9b9a40b1f2e42822c947fe3189f21c89ca5e9d2e8d6
ionic-vue-router
17 KB
sha256:c91a33962d5de0a766bf403cf87d680ea3daa8e5efa8e476ab62483ddb5f6f3a
test-results-7-20
6.29 MB
sha256:33c0a0f9b859d699ca713a5334d9537f35fc44174d8f7cbcf3df75bea58f7e4c