Merge pull request #4528 from albertgasset/MOBILE-4840

MOBILE-4840 cordova: Fix edge-to-edge with CSS zoom

Author: dpalou

config.xml

@@ -33,7 +33,7 @@
     <preference name="ScrollEnabled" value="true" />
     <preference name="KeyboardDisplayRequiresUserAction" value="false" />
     <preference name="HideKeyboardFormAccessoryBar" value="false" />
-    <preference name="KeyboardResizeMode" value="ionic" />
+    <preference name="KeyboardResizeMode" value="none" />
     <preference name="AllowInlineMediaPlayback" value="true" />
     <preference name="LoadUrlTimeoutValue" value="60000" />
     <preference name="load-url-timeout" value="60000" />

package-lock.json

@@ -79,7 +79,7 @@
         "@moodlehq/cordova-plugin-file-transfer": "2.0.0-moodle.2",
         "@moodlehq/cordova-plugin-inappbrowser": "6.0.0-moodle.1",
         "@moodlehq/cordova-plugin-intent": "2.2.0-moodle.3",
-        "@moodlehq/cordova-plugin-ionic-keyboard": "^2.2.0-moodle.1",
+        "@moodlehq/cordova-plugin-ionic-keyboard": "^2.2.0-moodle.2",
         "@moodlehq/cordova-plugin-ionic-webview": "5.0.0-moodle.5",
         "@moodlehq/cordova-plugin-media-capture": "5.0.0-moodle.1",
         "@moodlehq/cordova-plugin-qrscanner": "3.0.1-moodle.5",
@@ -234,4 +234,4 @@
             "nl.kingsquare.cordova.background-audio": {}
         }
     }
-}
+}

package.json

@@ -385,7 +385,7 @@ export class CoreSettingsHelperProvider {
     applyZoomLevel(zoomLevel: CoreZoomLevel): void {
         const zoom = CoreConstants.CONFIG.zoomlevels[zoomLevel];
 
-        document.documentElement.style.setProperty('--zoom-level', `${zoom}%`);
+        document.documentElement.style.setProperty('--zoom-ratio', `${zoom / 100}`);
     }
 
     /**

src/core/features/settings/services/settings-helper.ts

@@ -37,7 +37,7 @@ export default async function(): Promise<void> {
     });
 
     // Listener for keyboard height changes.
-    // We need to update the CSS variables and the ion-app height at the same time.
+    // We need to update safe area and keyboard height CSS variables at the same time.
     const imeInsetListener = await Inset.create({
         mask: InsetMask.IME,
         includeRoundedCorners: false,
@@ -54,14 +54,9 @@ export default async function(): Promise<void> {
         rootStyle.setProperty('--ion-safe-area-top', `${insets.top}px`);
         rootStyle.setProperty('--ion-safe-area-bottom', `${keyboardHeight > 0 ? 0 : insets.bottom}px`);
 
-        // Update ion-app height.
-        // This is the behaviour of the Cordova keyboard plugin on iOS.
-        const appStyle = document.querySelector('ion-app')?.style;
-        appStyle?.setProperty('height', keyboardHeight > 0 ? `${window.innerHeight - keyboardHeight}px` : null);
-
         // Update the CSS variable with the kebyoard height.
         // On iOS, the variable is updated in the forked Cordova keyboard plugin.
-        rootStyle.setProperty('--keyboard-height', keyboardHeight > 0 ? `${keyboardHeight}px` : null);
+        rootStyle.setProperty('--keyboard-height', `${keyboardHeight}px`);
     };
 
     systemInsetListener.addListener(update);

src/core/initializers/initialize-edge-to-edge.ts

@@ -8,19 +8,29 @@
 }
 
 :root {
-    --zoom-level: 100%;
-    zoom: var(--zoom-level);
+    --zoom-ratio: 1;
+    --zoom-level: calc(100% * var(--zoom-ratio));  // @deprecated since 5.1.
+    zoom: calc(100% * var(--zoom-ratio));
 
     &.ios {
-        font-size: var(--zoom-level);
+        font-size: calc(100% * var(--zoom-ratio));
     }
 
-    // Store safe area variables as --root-safe-area-*.
+    // Apply zoom ratio to safe area and keyboard height CSS variable.
+    // Also, store safe area variables as --root-safe-area-*.
     // Contrary to the --ion-safe-area-* variables, these are never overridden.
-    --root-safe-area-left: var(--ion-safe-area-left);
-    --root-safe-area-right: var(--ion-safe-area-right);
-    --root-safe-area-top: var(--ion-safe-area-top);
-    --root-safe-area-bottom: var(--ion-safe-area-bottom);
+    --root-safe-area-left: calc(var(--ion-safe-area-left, 0px) / var(--zoom-ratio));
+    --root-safe-area-right: calc(var(--ion-safe-area-right, 0px) / var(--zoom-ratio));
+    --root-safe-area-top: calc(var(--ion-safe-area-top, 0px) / var(--zoom-ratio));
+    --root-safe-area-bottom: calc(var(--ion-safe-area-bottom, 0px) / var(--zoom-ratio));
+    --root-keyboard-height: calc(var(--keyboard-height, 0px) / var(--zoom-ratio));
+    & > body {
+        --ion-safe-area-left: var(--root-safe-area-left);
+        --ion-safe-area-right: var(--root-safe-area-right);
+        --ion-safe-area-top: var(--root-safe-area-top);
+        --ion-safe-area-bottom: var(--root-safe-area-bottom);
+        --keyboard-height: var(--root-keyboard-height);
+    }
 }
 
 a {
@@ -187,6 +197,11 @@ core-split-view.menu-and-content {
     }
 }
 
+// Set ion-app height based on the keyboard height.
+ion-app {
+    height: calc(100% - var(--keyboard-height, 0px));
+}
+
 // Hidden submit button.
 .core-submit-hidden-enter {
     position: absolute;