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

Closed
dalethedeveloper opened this Issue Aug 24, 2012 · 9 comments

Comments

Projects
None yet
5 participants
@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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Aug 29, 2012

Member

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.

Member

jaspermdegroot commented Aug 29, 2012

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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Aug 29, 2012

Member

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

Member

jaspermdegroot commented Aug 29, 2012

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

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Sep 4, 2012

Member

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

Member

jaspermdegroot commented Sep 4, 2012

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

@ghost ghost assigned jaspermdegroot Sep 4, 2012

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Sep 5, 2012

Member

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.

Member

jaspermdegroot commented Sep 5, 2012

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

This comment has been minimized.

Show comment
Hide comment
@armennazarian

armennazarian Sep 18, 2012

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

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

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Sep 18, 2012

Member

Working on it. See PR #4999

Member

jaspermdegroot commented Sep 18, 2012

Working on it. See PR #4999

jaspermdegroot added a commit that referenced this issue Oct 15, 2012

Merge pull request #4999 from uGoMobi/fixed-toolbar-jitter
Fixes #4895 - 1px jitter on fixed toolbars
@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Oct 15, 2012

Member

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.

Member

jaspermdegroot commented Oct 15, 2012

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

This comment has been minimized.

Show comment
Hide comment
@zillionn

zillionn Mar 21, 2013

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

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

@maxaud

This comment has been minimized.

Show comment
Hide comment
@maxaud

maxaud Feb 14, 2015

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.

maxaud commented Feb 14, 2015

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment