UpdatePagePadding() and ui-page-header{ padding-top:2.5em; }

[ToddThomson]

For fixed headers, the call to UpdatePagePadding() causes page content to shift downward by 5px. This is due to the ui-page-header in structure being set to 2.5em ( or 16 x 2.5 = 40px ). Normally, jQM headers are 45px in height.
Setting ui-page-header-fixed to 45px ( or whatever your actual header height size is ) fixes this issue.

[jaspermdegroot]

@scottjehl - Should we still have those rules in the css now we have updatePagePadding?

.ui-page-header-fixed {
    padding-top: 2.5em;
}
.ui-page-footer-fixed {
    padding-bottom: 3em;
}

If you set updatePagePadding to false these padding rules still apply. Is that the way we want it?

[scottjehl]

Hmm. Well, as I'd said on the other issue, the option was about how often padding is updated, not whether it's set at all up-front.

That said, the em value here should match the height of the header, or as close as we can get it, before JS manages it. If it needs an update to match the current default height, go for it. I'd still suggest using em units though, if we can.

[jaspermdegroot]

@scottjehl

All clear (see also my comment on #4223). I will look into the default height - see if I can make it more consistent between browsers. Then I will update those padding rules. Issue with em units is the 1px border top and bottom, but will try to stick to those.

[rycfung]

After upgrading my app to 1.1.1, it seems like the flickering is still happening to my footer.
Whenever there is page change, there is a 1-2px whitespace at the bottom of my fixed footer.

I tried tweaking the padding-top padding-bottom with various value, there doesn't seem to be any changes at all to this flickering behaviour (ie. the 1-2px gap doesn't widen or shrink). In fact, it seems like the jquery mobile code is dynamically setting those padding anyway. I don't see how these css are doing anything in the case of fixed header/footers.

Is this fix suppose to remedy the problem of the flickering fixed footer on page changes? Or have I misinterpreted this issue?

[jaspermdegroot]

@rycfung

I think you misunderstood what this issue was about.
The code below is a simple representation of a page with fixed toolbars. Because ui-header and ui-footer have position fixed they are removed from the flow and ui-content goes underneath those elements. To prevent the top and bottom part of ui-content not being visible/accessible we set padding top and bottom on ui-page.
At first this is a default amount of padding and the updatePagePadding function sets the padding to the actual height of ui-header and ui-footer on certain events.

<div data-role="page" class="ui-page">
   <div data-role="header" data-position="fixed" class="ui-header"></div><!-- /header -->
   <div data-role="content" class="ui-content">

   </div><!-- /content -->
   <div data-role="footer" data-position="fixed" class="ui-footer"></div><!-- /footer -->
</div><!-- /page -->

Do you mind reporting your issue in a comment on issue #4259 which looks similar/related?
Please include information about on what platform/browser you tested and a test page. See https://github.com/jquery/jquery-mobile#issues.
Thanks!