1px jitter on the fixed footers under Android ICS + Chrome

[dalethedeveloper]

Referencing #3694 - the fix applied by @Wilto for 1.1 (and now in 1.2 RC) setting .ui-footer-fixed to bottom: 0 re-introduces the 1px gap consistently on ICS devices + Chrome with fixed footer toolbars. The stock Browser continues works correctly.

This can be reproduced viewing the docs (tested with Motorola Droid and Galaxy Nexus).

http://jquerymobile.com/demos/1.2.0-alpha.1/docs/toolbars/bars-fixed.html

This fix is undoing the other fix that caused the document height to be oversized, which resorts to an undesirable device conditional:

$(document).on('pagebeforeshow',function(e,ui){
  if( navigator.userAgent.indexOf('Android 4') != -1 && navigator.userAgent.indexOf('Chrome') != -1 )
    $('.ui-footer-fixed').css('bottom','-1px');
});

Not sure there is a good choice since fixing one breaks the other and vice versa, just wanted to bring attention to it.

[jaspermdegroot]

The fix that has been reverted is:

    .ui-footer-fixed {
        bottom: -1px;
        padding-bottom: 1px;
    }

This was done because it would cause an incorrect min-height for the page, but I think the actual cause was something else (probably the updatePagePadding functionality).
I added it to the code again, did some testing and didn't see an issue with the page height or unwanted vertical scrollbars.

Downside of the fix is that the bottom border of the footer isn't visible. Not something you would notice when using the default theme but only if you create a custom theme with high contrast borders.

[jaspermdegroot]

@Wilto the 1px jitter isn't only an issue on Android ICS / Chrome, right? Shall we put the fix back in the code?

[jaspermdegroot]

I suggest to do the same for the header, because I've seen the issue at the top of the page as well.

[jaspermdegroot]

Turned out after some more testing that this is fix does cause an issue with the page height (vertical scrollbar appear) if you click to hide the toolbars (tapToggle). So this requires some more investigation to see what is the best way to fix it.

[armennazarian]

Hey. Did u find a fix for the 1 pixel gap in bottom of the footer? I still have that issue.

[jaspermdegroot]

Working on it. See PR #4999

[jaspermdegroot]

This fix is merged in master but not cherry-picked into 1.1 and 1.2 stable branches yet. Let's do some more testing first.

[zillionn]

On Nexus7 2px fixed it for me, not 1.

[maxaud]

I'm having this same issue, in a Cordova application only. I can set the bottom to a negative number and I see it going down but the line still exists and I can see page content through it.