From 93d3d87d926c736f637319e8bb9861dbee3acfdb Mon Sep 17 00:00:00 2001 From: Kristina Lim Date: Wed, 15 Aug 2018 14:54:13 +0800 Subject: [PATCH] fix(modal): Fix calculation of top when % property An absolute-positioned element with % "top" property that is hidden through "display: none;" does not evaluate to the same value as a visible one for the following JS: window.getComputedStyle(element).top The computed "top" value for the hidden element is still the % value, while it is the computed px value if the element is visible or when using "visibility: hidden;". This is demonstrated in the following Plunker: http://run.plnkr.co/preview/cjkut64np00072y6ccj3tmqem/ $modalStack.open expects the expression above to return the px value, so a "10%" value gets treated as "10px". This is not the desired behavior, and a big limitation now that people use a big range of screen sizes. The faux modal is temporarily inserted with "z-index: -1" (JS), "display: none" (CSS), and "visibility: hidden;" (CSS). As a workaround, this commit assigns "display: block" (JS) to the faux modal. --- src/modal/modal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/modal/modal.js b/src/modal/modal.js index 3393fb3..a762c61 100644 --- a/src/modal/modal.js +++ b/src/modal/modal.js @@ -242,7 +242,7 @@ angular.module('mm.foundation.modal', ['mm.foundation.transition']) // Create a faux modal div just to measure its // distance to top - var faux = angular.element('
'); + var faux = angular.element('
'); parent.append(faux[0]); cssTop = parseInt($window.getComputedStyle(faux[0]).top) || 0; var openAt = calculateModalTop(faux, cssTop);