UX: remove iPad keyboard user setting from iOS 13

UX: remove iPad keyboard user setting from iOS 13

Removes setting for iOS devices that support Visual Viewport API.

On devices where it was previously enabled, it was causing some scrolling drift when invoking the composer.

diff --git a/app/assets/javascripts/discourse/components/composer-body.js.es6 b/app/assets/javascripts/discourse/components/composer-body.js.es6
index 99cf7b6..4a2fa23 100644
--- a/app/assets/javascripts/discourse/components/composer-body.js.es6
+++ b/app/assets/javascripts/discourse/components/composer-body.js.es6
@@ -7,6 +7,7 @@ import afterTransition from "discourse/lib/after-transition";
 import positioningWorkaround from "discourse/lib/safari-hacks";
 import { headerHeight } from "discourse/components/site-header";
 import KeyEnterEscape from "discourse/mixins/key-enter-escape";
+import { iOSWithVisualViewport } from "discourse/lib/utilities";
 
 const START_EVENTS = "touchstart mousedown";
 const DRAG_EVENTS = "touchmove mousemove";
@@ -132,16 +133,12 @@ export default Ember.Component.extend(KeyEnterEscape, {
       $document.on(END_EVENTS, endDrag);
     });
 
-    if (this.shouldUseVisualViewportListener()) {
+    if (iOSWithVisualViewport()) {
       this.viewportResize();
       window.visualViewport.addEventListener("resize", this.viewportResize);
     }
   },
 
-  shouldUseVisualViewportListener() {
-    return this.capabilities.isIOS && window.visualViewport !== undefined;
-  },
-
   viewportResize() {
     const composerVH = window.visualViewport.height * 0.01;
 
@@ -178,7 +175,7 @@ export default Ember.Component.extend(KeyEnterEscape, {
   willDestroyElement() {
     this._super(...arguments);
     this.appEvents.off("composer:resize", this, this.resize);
-    if (this.shouldUseVisualViewportListener()) {
+    if (iOSWithVisualViewport()) {
       window.visualViewport.removeEventListener("resize", this.viewportResize);
     }
   },
diff --git a/app/assets/javascripts/discourse/controllers/preferences/interface.js.es6 b/app/assets/javascripts/discourse/controllers/preferences/interface.js.es6
index 072c42c..e5b7bf4 100644
--- a/app/assets/javascripts/discourse/controllers/preferences/interface.js.es6
+++ b/app/assets/javascripts/discourse/controllers/preferences/interface.js.es6
@@ -10,7 +10,11 @@ import {
   setLocalTheme
 } from "discourse/lib/theme-selector";
 import { popupAjaxError } from "discourse/lib/ajax-error";
-import { safariHacksDisabled, isiPad } from "discourse/lib/utilities";
+import {
+  safariHacksDisabled,
+  isiPad,
+  iOSWithVisualViewport
+} from "discourse/lib/utilities";
 
 const USER_HOMES = {
   1: "latest",
@@ -51,7 +55,9 @@ export default Ember.Controller.extend(PreferencesTabController, {
 
   @computed()
   isiPad() {
-    return isiPad();
+    // TODO: remove this preference checkbox when iOS adoption > 90%
+    // (currently only applies to iOS 12 and below)
+    return isiPad() && !iOSWithVisualViewport();
   },
 
   @computed()
diff --git a/app/assets/javascripts/discourse/lib/safari-hacks.js.es6 b/app/assets/javascripts/discourse/lib/safari-hacks.js.es6
index bb19035..c0c7675 100644
--- a/app/assets/javascripts/discourse/lib/safari-hacks.js.es6
+++ b/app/assets/javascripts/discourse/lib/safari-hacks.js.es6
@@ -1,5 +1,8 @@
 import debounce from "discourse/lib/debounce";
-import { safariHacksDisabled } from "discourse/lib/utilities";
+import {
+  safariHacksDisabled,
+  iOSWithVisualViewport
+} from "discourse/lib/utilities";
 
 // TODO: remove calcHeight once iOS 13 adoption > 90%
 // In iOS 13 and up we use visualViewport API to calculate height
@@ -95,7 +98,7 @@ function positioningWorkaround($fixedElement) {
       fixedElement.style.position = "";
       fixedElement.style.top = "";
 
-      if (window.visualViewport === undefined) {
+      if (!iOSWithVisualViewport()) {
         fixedElement.style.height = oldHeight;
         Ember.run.later(
           () => $(fixedElement).removeClass("no-transition"),
@@ -176,7 +179,7 @@ function positioningWorkaround($fixedElement) {
 
     fixedElement.style.top = "0px";
 
-    if (window.visualViewport === undefined) {
+    if (!iOSWithVisualViewport()) {
       const height = calcHeight();
       fixedElement.style.height = height + "px";
       $(fixedElement).addClass("no-transition");
diff --git a/app/assets/javascripts/discourse/lib/utilities.js.es6 b/app/assets/javascripts/discourse/lib/utilities.js.es6
index 530f21d..599c3a4 100644
--- a/app/assets/javascripts/discourse/lib/utilities.js.es6
+++ b/app/assets/javascripts/discourse/lib/utilities.js.es6
@@ -544,6 +544,10 @@ export function isAppleDevice() {
 
 let iPadDetected = undefined;
 
+export function iOSWithVisualViewport() {
+  return isAppleDevice() && window.visualViewport !== undefined;
+}
+
 export function isiPad() {
   if (iPadDetected === undefined) {
     iPadDetected =
@@ -554,6 +558,8 @@ export function isiPad() {
 }
 
 export function safariHacksDisabled() {
+  if (iOSWithVisualViewport()) return false;
+
   let pref = localStorage.getItem("safari-hacks-disabled");
   let result = false;
   if (pref !== null) {

GitHub sha: 1aaddf13

1 Like