Skip to content
This repository

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

Closed
dalethedeveloper opened this Issue · 8 comments

4 participants

dalethedeveloper Jasper de Groot Armen zillionn
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.

Jasper de Groot
Owner

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.

Jasper de Groot
Owner

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

Jasper de Groot
Owner

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

Jasper de Groot
Owner

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.

Jasper de Groot uGoMobi referenced this issue from a commit
Commit has since been removed from the repository and is no longer available.
Armen

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

Jasper de Groot
Owner

Working on it. See PR #4999

Jasper de Groot uGoMobi closed this issue from a commit
Jasper de Groot Fixes #4895 - 1px jitter on fixed toolbars. Unset the fix for inline …
…toolbars (tapToggle) to prevent vertical scrollbar on desktop browsers.
1c1c3ec
Jasper de Groot uGoMobi closed this in 1c1c3ec
Jasper de Groot
Owner

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.