From 4bcafcd81caaaf6dad3a0e82f86fa3a467d85d48 Mon Sep 17 00:00:00 2001 From: Kristina Lim Date: Wed, 15 Aug 2018 03:07:14 +0800 Subject: [PATCH] Lower the start point for sliding of modals Occasionally, the page scrolls up while the modal is being opened. This was causing the final position of the modal to be at the wrong location relative to the viewport. This was happening because of a race condition between the animation that slides the modal from above the viewport to the middle, and focus() which the modal does: https://github.com/yalabot/angular-foundation/blob/0.8.0/src/modal/modal.js#L109 The final vertical position of the modal is at 10%, so the animation which translates the modal -25% vertically was starting -15% above the viewport. The focus() was then causing vertical scroll. This lowers the starting point of the animation, so there will no longer be scrolling. Additionally, the animation would only happen on large screens. The CSS property "top" is 0 for smaller screens. --- app/assets/stylesheets/darkswarm/animations.scss | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/animations.scss b/app/assets/stylesheets/darkswarm/animations.scss index 7601da02dc81..8a6efdc161a8 100644 --- a/app/assets/stylesheets/darkswarm/animations.scss +++ b/app/assets/stylesheets/darkswarm/animations.scss @@ -123,9 +123,12 @@ -moz-transition: -moz-transform 0.2s ease-out; -o-transition: -o-transform 0.2s ease-out; transition: transform 0.2s ease-out; - -webkit-transform: translate(0, -25%); - -ms-transform: translate(0, -25%); - transform: translate(0, -25%); + + @media only screen and (min-width: 641px) { + -webkit-transform: translate(0, -10%); + -ms-transform: translate(0, -10%); + transform: translate(0, -10%); + } } .reveal-modal.in {