Set input and textarea font size to 16px on iOS (#7480)

app/assets/javascripts/discourse/components/search-text-field.js.es6

@@ -20,6 +20,6 @@ export default TextField.extend({
     // iOS is crazy, without this we will not be
     // at the top of the page
     $(window).scrollTop(0);
-    $searchInput.trigger("touchstart").focus();
+    $searchInput.focus();
   }
 });

app/assets/javascripts/discourse/initializers/ios-input-no-zoom.js.es6

@@ -1,26 +0,0 @@
-// 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);
-        }
-      });
-    }
-  }
-};

app/assets/javascripts/discourse/widgets/header.js.es6

@@ -410,9 +410,7 @@ export default createWidget("header", {
 
       if (currentPath === "full-page-search") {
         scrollTop();
-        $(".full-page-search")
-          .trigger("touchstart")
-          .focus();
+        $(".full-page-search").focus();
         return false;
       } else {
         return DiscourseURL.routeTo("/search" + params);

app/assets/stylesheets/common/foundation/variables.scss

@@ -55,6 +55,10 @@ $font-down-4: 0.5745em;
 $font-down-5: 0.5em;
 $font-down-6: 0.4355em;
 
+// inputs/textareas in iOS need to be at least 16px to avoid triggering zoom on focus
+// with base at 15px, the below gives 16.05px
+$font-size-ios-input: 1.07em;
+
 // Common line-heights
 $line-height-small: 1;
 $line-height-medium: 1.2; // Headings or large text

app/assets/stylesheets/mobile/discourse.scss

@@ -9,15 +9,30 @@ body {
   background-color: $secondary;
 }
 
-textarea {
-  background-color: $secondary;
-}
+.ios-device {
+  textarea {
+    background-color: $secondary;
+    font-size: $font-size-ios-input;
+  }
 
-textarea {
-  // this increases font size to above 16px
-  // which is the threshold on iOS to trigger zooming
-  // when focusing on a textarea
-  font-size: $font-up-1;
+  input {
+    &[type="text"],
+    &[type="password"],
+    &[type="datetime"],
+    &[type="datetime-local"],
+    &[type="date"],
+    &[type="month"],
+    &[type="time"],
+    &[type="week"],
+    &[type="number"],
+    &[type="email"],
+    &[type="url"],
+    &[type="search"],
+    &[type="tel"],
+    &[type="color"] {
+      font-size: $font-size-ios-input;
+    }
+  }
 }
 
 blockquote {

app/helpers/application_helper.rb

@@ -111,6 +111,7 @@ module ApplicationHelper
     list = []
     list << (mobile_view? ? 'mobile-view' : 'desktop-view')
     list << (mobile_device? ? 'mobile-device' : 'not-mobile-device')
+    list << 'ios-device' if ios_device?
     list << 'rtl' if rtl?
     list << text_size_class
     list << 'anon' unless current_user
@@ -317,6 +318,10 @@ module ApplicationHelper
     MobileDetection.mobile_device?(request.user_agent)
   end
 
+  def ios_device?
+    MobileDetection.ios_device?(request.user_agent)
+  end
+
   def customization_disabled?
     request.env[ApplicationController::NO_CUSTOM]
   end

lib/mobile_detection.rb

@@ -16,4 +16,9 @@ module MobileDetection
       mobile_device?(user_agent)
     end
   end
+
+  def self.ios_device?(user_agent)
+    user_agent =~ /iPad|iPhone|iPod/
+  end
+
 end