Page: Use visibility:hidden instead of display:none to hide page

arschmitz · arschmitz · commit 4af34dffea60 · 2016-03-25T22:43:04.000-04:00
Avoiding display: none means we can calculate heights before transitions This means less visual update after the end of the transition and removes the need for binding to pageshow for page layout updates this also has a small performance benefit since it avoids reflows Closes gh-8241 Fixes gh-8137
diff --git a/css/structure/jquery.mobile.core.css b/css/structure/jquery.mobile.core.css
@@ -44,15 +44,15 @@ div.ui-mobile-viewport {
 	width: 100%;
 	min-height: 100%;
 	position: absolute;
-	display: none;
+	visibility: hidden;
 	border: 0;
 }
 /* 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-mobile .ui-page-active {
-	display: block;
+	visibility: visible;
 	overflow: visible;
 	overflow-x: hidden;
 }

Original file line number	Diff line number	Diff line change
`@@ -44,15 +44,15 @@ div.ui-mobile-viewport {`
`44`	`44`	`width: 100%;`
`45`	`45`	`min-height: 100%;`
`46`	`46`	`position: absolute;`
`47`		`- display: none;`
	`47`	`+ visibility: hidden;`
`48`	`48`	`border: 0;`
`49`	`49`	`}`
`50`	`50`	`/* On ios4, setting focus on the page element causes flashing during transitions when there is an outline, so we turn off outlines */`
`51`	`51`	`.ui-page {`
`52`	`52`	`outline: none;`
`53`	`53`	`}`
`54`	`54`	`.ui-mobile .ui-page-active {`
`55`		`- display: block;`
	`55`	`+ visibility: visible;`
`56`	`56`	`overflow: visible;`
`57`	`57`	`overflow-x: hidden;`
`58`	`58`	`}`