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

core/src/components/app/test/safe-area/app.e2e.ts

@@ -18,20 +18,56 @@ configs({ directions: ['ltr'] }).forEach(({ config, title, screenshot }) => {
 
       await expect(page).toHaveScreenshot(screenshot(`app-${screenshotModifier}-diff`));
     };
+
     test.beforeEach(async ({ page }) => {
       await page.goto(`/src/components/app/test/safe-area`, config);
     });
-    test('should not have visual regressions with action sheet', async ({ page }) => {
-      await testOverlay(page, '#show-action-sheet', 'ionActionSheetDidPresent', 'action-sheet');
-    });
-    test('should not have visual regressions with menu', async ({ page }) => {
-      await testOverlay(page, '#show-menu', 'ionDidOpen', 'menu');
-    });
-    test('should not have visual regressions with picker', async ({ page }) => {
-      await testOverlay(page, '#show-picker', 'ionPickerDidPresent', 'picker');
+
+    test.describe(title('Ionic safe area variables'), () => {
+      test.beforeEach(async ({ page }) => {
+        const htmlTag = page.locator('html');
+        const hasSafeAreaClass = await htmlTag.evaluate((el) => el.classList.contains('safe-area'));
+
+        expect(hasSafeAreaClass).toBe(true);
+      });
+
+      test('should not have visual regressions with action sheet', async ({ page }) => {
+        await testOverlay(page, '#show-action-sheet', 'ionActionSheetDidPresent', 'action-sheet');
+      });
+      test('should not have visual regressions with menu', async ({ page }) => {
+        await testOverlay(page, '#show-menu', 'ionDidOpen', 'menu');
+      });
+      test('should not have visual regressions with picker', async ({ page }) => {
+        await testOverlay(page, '#show-picker', 'ionPickerDidPresent', 'picker');
+      });
+      test('should not have visual regressions with toast', async ({ page }) => {
+        await testOverlay(page, '#show-toast', 'ionToastDidPresent', 'toast');
+      });
     });
-    test('should not have visual regressions with toast', async ({ page }) => {
-      await testOverlay(page, '#show-toast', 'ionToastDidPresent', 'toast');
+
+    test.describe(title('Capacitor safe area variables'), () => {
+      test.beforeEach(async ({ page }) => {
+        const toggleButton = page.locator('#toggle-safe-area');
+        await toggleButton.click();
+
+        const htmlTag = page.locator('html');
+        const hasSafeAreaClass = await htmlTag.evaluate((el) => el.classList.contains('safe-area-capacitor'));
+
+        expect(hasSafeAreaClass).toBe(true);
+      });
+
+      test('should not have visual regressions with action sheet', async ({ page }) => {
+        await testOverlay(page, '#show-action-sheet', 'ionActionSheetDidPresent', 'capacitor-action-sheet');
+      });
+      test('should not have visual regressions with menu', async ({ page }) => {
+        await testOverlay(page, '#show-menu', 'ionDidOpen', 'capacitor-menu');
+      });
+      test('should not have visual regressions with picker', async ({ page }) => {
+        await testOverlay(page, '#show-picker', 'ionPickerDidPresent', 'capacitor-picker');
+      });
+      test('should not have visual regressions with toast', async ({ page }) => {
+        await testOverlay(page, '#show-toast', 'ionToastDidPresent', 'capacitor-toast');
+      });
     });
   });
 });

core/src/components/app/test/safe-area/index.html

@@ -19,6 +19,13 @@
         --ion-safe-area-bottom: 40px;
         --ion-safe-area-left: 40px;
       }
+
+      .safe-area-capacitor {
+        --safe-area-inset-top: 40px;
+        --safe-area-inset-right: 40px;
+        --safe-area-inset-bottom: 40px;
+        --safe-area-inset-left: 40px;
+      }
     </style>
   </head>
 
@@ -48,6 +55,7 @@
       </ion-header>
 
       <ion-content id="main">
+        <button id="toggle-safe-area" onclick="toggleSafeArea()">Toggle Safe Area Classes</button>
         <ion-card>
           <ion-card-header>
             <ion-card-title>Card</ion-card-title>
@@ -143,6 +151,19 @@
         document.body.appendChild(toast);
         await toast.present();
       }
+
+      // toggle between safe area classes based on button click
+      function toggleSafeArea() {
+        console.log('Toggling safe area classes');
+        const htmlTag = document.documentElement;
+        if (htmlTag.classList.contains('safe-area-capacitor')) {
+          htmlTag.classList.remove('safe-area-capacitor');
+          htmlTag.classList.add('safe-area');
+        } else {
+          htmlTag.classList.remove('safe-area');
+          htmlTag.classList.add('safe-area-capacitor');
+        }
+      }
     </script>
   </body>
 </html>

core/src/css/core.scss

@@ -252,10 +252,12 @@ html.plt-ios.plt-hybrid, html.plt-ios.plt-pwa {
 
 @supports (padding-top: env(safe-area-inset-top)) {
   html {
-    --ion-safe-area-top: env(safe-area-inset-top);
-    --ion-safe-area-bottom: env(safe-area-inset-bottom);
-    --ion-safe-area-left: env(safe-area-inset-left);
-    --ion-safe-area-right: env(safe-area-inset-right);
+    // `--safe-area-inset-*` are set by Capacitor
+    // @see https://capacitorjs.com/docs/apis/system-bars#android-note
+    --ion-safe-area-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
+    --ion-safe-area-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
+    --ion-safe-area-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
+    --ion-safe-area-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
   }
 }