From 3f2105db850d16a0a21db2c68bb64c4f252b7f26 Mon Sep 17 00:00:00 2001 From: Sam Date: Wed, 8 Nov 2017 07:31:45 +1100 Subject: [PATCH] UX: iOS 11 modals now hide all background This fixes issues where login looks very buggy on iOS see also: https://meta.discourse.org/t/ios-11-makes-discourse-buggy/71140/7 --- .../discourse/lib/show-modal.js.es6 | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/app/assets/javascripts/discourse/lib/show-modal.js.es6 b/app/assets/javascripts/discourse/lib/show-modal.js.es6 index 10e7695b57d..c13d390925c 100644 --- a/app/assets/javascripts/discourse/lib/show-modal.js.es6 +++ b/app/assets/javascripts/discourse/lib/show-modal.js.es6 @@ -1,7 +1,37 @@ +import { isAppleDevice } from 'discourse/lib/safari-hacks'; + export default function(name, opts) { opts = opts || {}; const container = Discourse.__container__; + + // iOS 11 -> 11.1 have broken INPUTs on position fixed + // if for any reason there is a body higher than 100% behind them. + // What happens is that when INPUTs gets focus they shift the body + // which ends up moving the cursor to an invisible spot + // this makes the login experience on iOS painful, user thinks it is broken. + // + // Also, very little value in showing main outlet and header on iOS + // anyway, so just hide it. + if (isAppleDevice()) { + let pos = $(window).scrollTop(); + $(window) + .off('show.bs.modal.ios-hacks') + .on('show.bs.modal.ios-hacks', () => { + $('#main-outlet, header').hide(); + }); + + $(window) + .off('hide.bs.modal.ios-hacks') + .on('hide.bs.modal.ios-hacks', () => { + $('#main-outlet, header').show(); + $(window).scrollTop(pos); + + $(window).off('hide.bs.modal.ios-hacks'); + $(window).off('show.bs.modal.ios-hacks'); + }); + } + // We use the container here because modals are like singletons // in Discourse. Only one can be shown with a particular state. const route = container.lookup('route:application');