diff --git a/app/assets/javascripts/discourse/components/search-text-field.js.es6 b/app/assets/javascripts/discourse/components/search-text-field.js.es6 index 81d6642202c..bddc31e8492 100644 --- a/app/assets/javascripts/discourse/components/search-text-field.js.es6 +++ b/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(); } }); 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 deleted file mode 100644 index a61e99edead..00000000000 --- a/app/assets/javascripts/discourse/initializers/ios-input-no-zoom.js.es6 +++ /dev/null @@ -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); - } - }); - } - } -}; diff --git a/app/assets/javascripts/discourse/widgets/header.js.es6 b/app/assets/javascripts/discourse/widgets/header.js.es6 index 909e4ac7531..271600cbb07 100644 --- a/app/assets/javascripts/discourse/widgets/header.js.es6 +++ b/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); diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss index 220432a4900..71efde7ed1e 100644 --- a/app/assets/stylesheets/common/foundation/variables.scss +++ b/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 diff --git a/app/assets/stylesheets/mobile/discourse.scss b/app/assets/stylesheets/mobile/discourse.scss index bb863ced62e..1c25d5e5ac4 100644 --- a/app/assets/stylesheets/mobile/discourse.scss +++ b/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 { diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 723d77a0a81..0b9b8a03871 100644 --- a/app/helpers/application_helper.rb +++ b/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 diff --git a/lib/mobile_detection.rb b/lib/mobile_detection.rb index fe8d7475f99..a1acbc6e0ee 100644 --- a/lib/mobile_detection.rb +++ b/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