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

arschmitz · arschmitz · commit 8cbf6490db7d · 2016-07-03T22:42:12.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 jquery-archivegh-8241 Fixes jquery-archivegh-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`	`}`