From 14eb8eea014e10ec41b8748546231e10a802cc68 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Mon, 15 Apr 2019 13:05:43 -0400
Subject: [PATCH] FIX: Prevent input zooming in iOS

Since enabling pinch-to-zoom in iOS (eae22548de4eedad875555e7353b8abfdce2452b), there was an issue with inputs: Safari auto-zooms inputs with font-size under 16px. Now zooming will be disabled while focus is on an input.

This commit also removes a) a lightbox zoom-enabling event (no longer needed) and b) a comment about iOS zoom issues.
---
 .../initializers/ios-input-no-zoom.js.es6     | 26 +++++++++++++++++++
 .../javascripts/discourse/lib/lightbox.js.es6 |  7 +----
 .../javascripts/discourse/lib/mobile.js.es6   | 12 ---------
 3 files changed, 27 insertions(+), 18 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/initializers/ios-input-no-zoom.js.es6

diff --git a/app/assets/javascripts/discourse/initializers/ios-input-no-zoom.js.es6 b/app/assets/javascripts/discourse/initializers/ios-input-no-zoom.js.es6
new file mode 100644
index 00000000000..a61e99edead
--- /dev/null
+++ b/app/assets/javascripts/discourse/initializers/ios-input-no-zoom.js.es6
@@ -0,0 +1,26 @@
+// Prevents auto-zoom in Safari iOS inputs with font-size < 16px
+const originalMeta = $("meta[name=viewport]").attr("content");
+
+export default {
+  name: "ios-input-no-zoom",
+
+  initialize() {
+    let iOS =
+      !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
+
+    if (iOS) {
+      $("body").on("touchstart", "input", () => {
+        $("meta[name=viewport]").attr(
+          "content",
+          "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+        );
+      });
+
+      $("body").on("focusout", "input", e => {
+        if (e.relatedTarget === null) {
+          $("meta[name=viewport]").attr("content", originalMeta);
+        }
+      });
+    }
+  }
+};
diff --git a/app/assets/javascripts/discourse/lib/lightbox.js.es6 b/app/assets/javascripts/discourse/lib/lightbox.js.es6
index 3b3f7b680db..77c675e3447 100644
--- a/app/assets/javascripts/discourse/lib/lightbox.js.es6
+++ b/app/assets/javascripts/discourse/lib/lightbox.js.es6
@@ -6,7 +6,7 @@ export default function($elem) {
   if (!$elem) {
     return;
   }
-  const originalMeta = $("meta[name=viewport]").attr("content");
+
   loadScript("/javascripts/jquery.magnific-popup.min.js").then(function() {
     const spoilers = $elem.find(".spoiler a.lightbox, .spoiled a.lightbox");
     $elem
@@ -24,10 +24,6 @@ export default function($elem) {
 
         callbacks: {
           open() {
-            $("meta[name=viewport]").attr(
-              "content",
-              "width=device-width, initial-scale=1.0"
-            );
             const wrap = this.wrap,
               img = this.currItem.img,
               maxHeight = img.css("max-height");
@@ -41,7 +37,6 @@ export default function($elem) {
             });
           },
           beforeClose() {
-            $("meta[name=viewport]").attr("content", originalMeta);
             this.wrap.off("click.pinhandler");
             this.wrap.removeClass("mfp-force-scrollbars");
           }
diff --git a/app/assets/javascripts/discourse/lib/mobile.js.es6 b/app/assets/javascripts/discourse/lib/mobile.js.es6
index df164b031cb..de9a10697b6 100644
--- a/app/assets/javascripts/discourse/lib/mobile.js.es6
+++ b/app/assets/javascripts/discourse/lib/mobile.js.es6
@@ -36,18 +36,6 @@ const Mobile = {
       // localStorage may be disabled, just skip this
       // you get security errors if it is disabled
     }
-
-    // Sam: I tried this to disable zooming on iOS 10 but it is not consistent
-    //  you can still sometimes trigger zoom and be stuck in a horrible state
-    //
-    // let iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
-    // if (iOS) {
-    //   document.documentElement.addEventListener('touchstart', function (event) {
-    //     if (event.touches.length > 1) {
-    //       event.preventDefault();
-    //     }
-    //   }, false);
-    // }
   },
 
   toggleMobileView() {