Fix for "header/footer scrolls with document" problem in Issue 58.

jquery-archive · Nov 11, 2010 · 9dce1c3 · 9dce1c3
1 parent ad2c894
commit 9dce1c3
Showing 1 changed file with 4 additions and 1 deletion.
diff --git a/themes/default/jquery.mobile.headerfooter.css b/themes/default/jquery.mobile.headerfooter.css
@@ -5,6 +5,9 @@
 */
 /* fixed page header & footer configuration */
 .ui-header, .ui-footer, .ui-page-fullscreen .ui-header, .ui-page-fullscreen .ui-footer  { position: absolute;  overflow: hidden; width: 100%; border-left-width: 0; border-right-width: 0; }
-.ui-header-fixed, .ui-footer-fixed { z-index: 1000; }
+.ui-header-fixed, .ui-footer-fixed {
+	z-index: 1000;
+	-webkit-transform: translateZ(0); /* Force header/footer rendering to go through the same rendering pipeline as native page scrolling. */
+}
 .ui-footer-duplicate, .ui-page-fullscreen .ui-fixed-inline { display: none; }
 .ui-page-fullscreen .ui-header, .ui-page-fullscreen .ui-footer { opacity: .9; }