From c171e3dccd7d540c90d27ac0ce173e3d5fa6f7ec Mon Sep 17 00:00:00 2001
From: David Taylor <david@taylorhq.com>
Date: Mon, 20 Jan 2025 19:17:30 +0000
Subject: [PATCH] UX: Replace `font-size-ios-input` workaround (#30877)

By default, iOS safari will automatically zoom into focused inputs with
font-sizes less than 16px. To avoid this, we had a CSS rule to ensure
inputs always had a large font-size on iOS. This worked, but did lead to
design inconsistencies.

Instead, we can set `user-scalable=no` on the viewport meta tag. Since
iOS 10, this property doesn't actually stop users zooming. But it *does*
still prevent the automatic zooming of inputs. So it solves our zoom
problem, and allows us to remove the CSS font-size workaround.
---
 .../safari-viewport-setup.js                  | 20 +++++++++++++++++++
 .../stylesheets/common/font-variables.scss    |  3 ---
 .../stylesheets/common/foundation/mixins.scss |  6 ------
 app/assets/stylesheets/mobile/discourse.scss  |  1 -
 .../mobile/form-kit/_control-input.scss       |  1 -
 5 files changed, 20 insertions(+), 11 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/app/instance-initializers/safari-viewport-setup.js

diff --git a/app/assets/javascripts/discourse/app/instance-initializers/safari-viewport-setup.js b/app/assets/javascripts/discourse/app/instance-initializers/safari-viewport-setup.js
new file mode 100644
index 00000000000..159614ce121
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/instance-initializers/safari-viewport-setup.js
@@ -0,0 +1,20 @@
+/*
+  In iOS Safari, setting user-scalable=no doesn't actually prevent the user from zooming in.
+  But, it does prevent the annoying 'auto zoom' when focussing input fields with small font-sizes.
+*/
+export default {
+  initialize(container) {
+    if (!container.lookup("service:capabilities").isIOS) {
+      return;
+    }
+
+    const viewport = document.querySelector("meta[name=viewport]");
+    if (viewport) {
+      const current = viewport.getAttribute("content");
+      viewport.setAttribute(
+        "content",
+        current.replace("user-scalable=yes", "user-scalable=no")
+      );
+    }
+  },
+};
diff --git a/app/assets/stylesheets/common/font-variables.scss b/app/assets/stylesheets/common/font-variables.scss
index ed4b9cca6dc..d98d942d4d3 100644
--- a/app/assets/stylesheets/common/font-variables.scss
+++ b/app/assets/stylesheets/common/font-variables.scss
@@ -28,9 +28,6 @@
   --font-down-1-rem: 0.8706rem;
   --font-down-2-rem: 0.7579rem;
 
-  // inputs/textareas in iOS need to be at least 16px to avoid triggering zoom on focus
-  --font-size-ios-input: max(1em, 16px);
-
   // Common line-heights
   --line-height-small: 1;
   --line-height-medium: 1.2; // Headings or large text
diff --git a/app/assets/stylesheets/common/foundation/mixins.scss b/app/assets/stylesheets/common/foundation/mixins.scss
index 3b7cf47b89b..ecc5185e84a 100644
--- a/app/assets/stylesheets/common/foundation/mixins.scss
+++ b/app/assets/stylesheets/common/foundation/mixins.scss
@@ -115,12 +115,6 @@ $hpad: 0.65em;
   line-height: normal;
   box-sizing: border-box;
   padding: $vpad $hpad;
-
-  .ios-device & {
-    font-size: var(--font-size-ios-input);
-    padding-top: $vpad * 0.8;
-    padding-bottom: $vpad * 0.8;
-  }
 }
 
 @mixin sticky {
diff --git a/app/assets/stylesheets/mobile/discourse.scss b/app/assets/stylesheets/mobile/discourse.scss
index 63b560ad645..37685db12b3 100644
--- a/app/assets/stylesheets/mobile/discourse.scss
+++ b/app/assets/stylesheets/mobile/discourse.scss
@@ -11,7 +11,6 @@ body {
 .ios-device {
   textarea {
     background-color: var(--secondary);
-    font-size: var(--font-size-ios-input);
     -webkit-tap-highlight-color: transparent;
   }
 
diff --git a/app/assets/stylesheets/mobile/form-kit/_control-input.scss b/app/assets/stylesheets/mobile/form-kit/_control-input.scss
index 2ffda7a96fe..d64c1506f39 100644
--- a/app/assets/stylesheets/mobile/form-kit/_control-input.scss
+++ b/app/assets/stylesheets/mobile/form-kit/_control-input.scss
@@ -1,5 +1,4 @@
 .form-kit__before-input,
 .form-kit__after-input {
-  font-size: var(--font-size-ios-input);
   height: 2.25em;
 }