Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

Fixed footer flickers to top when switching pages (iOS) #2646

Closed
offsky opened this issue Oct 7, 2011 · 7 comments
Closed

Fixed footer flickers to top when switching pages (iOS) #2646

offsky opened this issue Oct 7, 2011 · 7 comments
Assignees
@jblas

Comments

@offsky
Copy link

offsky commented Oct 7, 2011

On iPhone, when you have a persistent fixed footer and you switch pages, the footer briefly jumps to the top of the page and then jumps back down to its proper place after the new page loads.

Here is a simple test case:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="apple-mobile-web-app-capable" content="yes" />

    <link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

</head> 
<body> 

<div data-role="page" id="tasks" data-title="Tasks">
    <div data-role="header" data-position="fixed">
        <h1>Title</h1>
    </div>
    <div data-role="content">   
        <ul data-role="listview" class="ui-shadow"> 
            <li class="ui-li-has-count"><a href="#list">One</a></li>
            <li class="ui-li-has-count"><a href="#list">Two</a></li>
        </ul>
    </div>
    <div data-role="footer" data-position="fixed" data-id="myfooter">
        <div data-role="navbar">
        <ul>
            <li>Foo</li>
            <li>Bar</li>
        </ul>
        </div>
    </div>
</div>

<div data-role="page" id="list" data-title="List">
    <div data-role="header" data-position="fixed">
        <h1>Title 2</h1>
    </div>
    <div data-role="content">   
        <ul data-role="listview">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <div data-role="footer" data-position="fixed" data-id="myfooter">
        <div data-role="navbar">
        <ul>
            <li>Foo</li>
            <li>Bar</li>
        </ul>
        </div>
    </div>
</div>



</body>
</html>
@addyosmani
Copy link

Some further input: I've observed this when using the fixed/persistent footers in desktop browsers (Chrome/FF) as well. May need to take a look at tweaking the fixHeaderFooter plugin.

Here's the above test case on jsFiddle: http://jsfiddle.net/QqdjX/1/show/ in case you'd like to take a quick look at whats happening.

Curiously, it looks like it may be the switch to pages with a different minimum height thats causing this behaviour :)

Some side comments:

I may be the only one that thought this, but at the moment I see a lot of people implementing fixed position toolbars with jQuery mobile where the idea is to have the same navigation 'persist' across each page/view. Rather than requiring duplicate markup (as per the above) for each instance of the nav, would it make sense to consider offering a way to just define such a navigation once and then have it properly persist without being affected by the overall CSS properties of the current page being viewed? Just an idea.

@ghost ghost assigned jblas Oct 12, 2011
@ChristianWeyer
Copy link

I have the exact same problem.
No issues on Android emu, Android device, iOS simu ... but on my iPhone 4. Jumps around :(

@ChristianWeyer
Copy link

BTW: there seems to be some nice implementation hint mentioned here:
http://stackoverflow.com/questions/6487762/persistent-nav-footer-for-the-iphone-with-a-html5-web-app

@frequent
Copy link
Contributor

I think I found the cause for the jumping. It is the fixedToolbar function and only happens when the page height is smaller then the screen height.

The problem is with thisCSStop

Two scenarios:
(a) If document size is 2000px and screenHeight is 500px, thisCSStop and fix-footer position will more or less equate to -(2000px-500px) = -1500px. So to show the footer it's pulled up from css.top=0 to top=-1500px, and to hide it's pushed down to top=0 (!)

(b) But if document size is 100px and screenHeight is 500px, thisCSStop and fix-footer position will be -(100px-500px) = +400px. The problem is on hiding, because pushing down to top=0 in fact kicks the footer up to the end of the document. On the second run of hide() it then works correclty. There's the jumping.

I tried to fix like this:

// make the fixed-footer with thisCSStop>0 also enter if-statement 
// when immideately is undefined :-)
if ( thisCSStop < 0  ||  ( el.is( ".ui-header-fixed" ) || 
    ( el.is( ".ui-footer-fixed" ) && immediately != true )  ) && thisCSStop !== 0 ) {
    if ( immediately ) {
        // the footer should not end here, as top="+400"
        el.css( "top", 0);
    } else {
        // it will enter here
        if ( el.css( "top" ) !== "auto" && parseFloat( el.css( "top" ) ) !== 0 ) {
             classes = "out reverse";
             el.animationComplete(function() {
             // cannot use top="0", jumping
             // cannot use negative values, increase document size
             // so kick the footer out of view on top by setting
             // el.css("top", -thisCSStop) 
            el.removeClass( classes ).css( "top", 
                     ( el.is(".ui-footer-fixed") && thisCSStop > 0 ) ? -thisCSStop : 0 );
    }).addClass( classes );

Should work.

@frequent frequent mentioned this issue Nov 15, 2011
Closed
@agcolom
Copy link
Contributor

agcolom commented Mar 14, 2012

Just tested with latest and iOS5 and I believe this is fixed now as it works beautifully for me when testing:
http://jsfiddle.net/agcolom/QqdjX/5/show/

@toddparker I think we can close... Anne

@frequent
Copy link
Contributor

It was a bug in the old fixed toolbar behavior, which was replaced in JQM RC 1.1. So I guess this really can be closed :-)

@toddparker
Copy link
Contributor

Yep, closing since the new 1.1 fixed bars will solve this.

@frequent frequent mentioned this issue Apr 11, 2012
Closed
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@jblas jblas

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@addyosmani @toddparker @jblas @agcolom @frequent @ChristianWeyer @offsky