Page: Tweak CSS for non-active page hiding

Ref 99005f0 and 8cbf649 Closes gh-8495
jquery · 9a2daa07058e6f4a768d524ecb55fdb797eeb858 · jaspermdegroot committed Aug 4, 2016 · Aug 4, 2016 · 9a2daa0 · deepsea887
1 parent d5c5868
commit 9a2daa07058e6f4a768d524ecb55fdb797eeb858
Unified Split

Showing with 16 additions and 8 deletions.

+16 −8 css/structure/jquery.mobile.core.css
diff --git a/css/structure/jquery.mobile.core.css b/css/structure/jquery.mobile.core.css
@@ -50,23 +50,31 @@ div.ui-mobile-viewport {
 	border: 0;
 }
 
-/* Need to make sure things with visibility:visible inside a pag stay hidden */
-.ui-page:not(.ui-page-active) *{
-    visibility: hidden !important;
-}
-.ui-page:not(.ui-page-active) {
-	overflow: hidden;
-	max-height: 100%;
-}
 /* On ios4, setting focus on the page element causes flashing during transitions when there is an outline, so we turn off outlines */
+
 .ui-page {
 	outline: none;
 }
+
+.ui-page:not(.ui-page-active),
+[data-role=page]:not(.ui-page-active) {
+	bottom: 0;
+	max-height: 100%;
+	overflow: hidden;
+}
+
+/* Use !important to override "visibility: visible" for any element inside a non-active page */
+
+.ui-page:not(.ui-page-active) * {
+    visibility: hidden !important;
+}
+
 .ui-mobile .ui-page-active {
 	visibility: visible;
 	overflow: visible;
 	overflow-x: hidden;
 }
+
 @media screen and (orientation: portrait) {
 	.ui-mobile .ui-page {
 		min-height: 420px;