From 32fc43875c499e67b3aecbaa0734b5f61d5dd169 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 7 Oct 2021 11:26:08 +0200
Subject: [PATCH] MOBILE-3103 style: Fix zoom texts on iOS

---
 .../features/settings/services/settings-helper.ts  |  4 ++--
 src/theme/theme.base.scss                          | 14 +++++++++++++-
 src/theme/theme.light.scss                         |  1 +
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/core/features/settings/services/settings-helper.ts b/src/core/features/settings/services/settings-helper.ts
index ee07046d5..51e7a9c1f 100644
--- a/src/core/features/settings/services/settings-helper.ts
+++ b/src/core/features/settings/services/settings-helper.ts
@@ -388,8 +388,8 @@ export class CoreSettingsHelperProvider {
      */
     applyZoomLevel(zoomLevel: CoreZoomLevel): void {
         const zoom = CoreConstants.CONFIG.zoomlevels[zoomLevel];
-        // @todo MOBILE-3790 non-standard property, doesn't work everywhere.
-        document.documentElement.style.zoom = zoom + '%';
+
+        document.documentElement.style.setProperty('--zoom-level', zoom + '%');
     }
 
     /**
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 90437ec03..c040c18d3 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -1,7 +1,19 @@
 @import "./globals.scss";
 
+html.force-safe-area-margins {
+    --ion-safe-area-left: 40px;
+    --ion-safe-area-right: 40px;
+    --ion-safe-area-top: 40px;
+    --ion-safe-area-bottom: 40px;
+}
+
+// @todo MOBILE-3790 non-standard property, doesn't work everywhere.
+html {
+    zoom: var(--zoom-level);
+}
+
 body {
-    -webkit-text-size-adjust: auto;
+    -webkit-text-size-adjust: var(--zoom-level);
 }
 
 // Common styles.
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index 1f56a2b39..fb0ad53ec 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -61,6 +61,7 @@
     --a11y-min-target-size: 44px;
     --a11y-focus-color: var(--primary);
     --a11y-focus-width: 2px;
+    --zoom-level: 100%;
 
     --module-icon-size: 24px;