From 3450bb25aeeddcf50c1a7bd7a42b8b9919787a00 Mon Sep 17 00:00:00 2001 From: Kevin Ansfield Date: Thu, 9 Nov 2017 12:55:46 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20elastic=20scroll=20issues?= =?UTF-8?q?=20in=20admin=20on=20iOS?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit closes https://github.com/TryGhost/Ghost/issues/9093 - set app container to `position: fixed` covering full window area to prevent elastic scroll being possible on iOS --- ghost/admin/app/styles/layouts/main.css | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/ghost/admin/app/styles/layouts/main.css b/ghost/admin/app/styles/layouts/main.css index a9c85da9f2..36410c0a2c 100644 --- a/ghost/admin/app/styles/layouts/main.css +++ b/ghost/admin/app/styles/layouts/main.css @@ -2,16 +2,19 @@ /* ---------------------------------------------------------- */ /* - Ember's app container, set height so that .gh-app and .gh-viewport - don't need to use 100vh where bottom of screen gets covered by iOS menus - http://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html + Ember's app container. Use `position: fixed`, covering full window area so + that scrolling on mobile doesn't trigger elastic scroll TODO: Once we have routable components it should be possible to remove this by moving the gh-app component functionality into the application component which would remove the extra div that this targets. */ body > .ember-view:not(.default-liquid-destination) { - height: 100%; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; } /* Main viewport, contains main content, and alerts */