Page scrolls 1px before and after transition

[jhogervorst]

Issue description

If you navigate to a page with a fixed header using a transition, the page is scrolled to 1px (y offset) before the transition starts, and scrolled (back) to 0px (y offset) after the transition ends. You see the whole page jump down 1px after a transition ended.

Test page

Here's a test page. I took the latest CSS and replaced all occurrences of "ms;" with "0ms;". Therefore all transitions are ten times slower.

Open the page and click a button. There's a button for each transition. I think "Slide" gives a good view of the problem.

Closely look at the header (or button) in the second page when the transition ends. You'll see that it moves down 1px.

I recorded a video of the problem on my Mac. Here's the MOV file (3.9MB). I'd recommend playing it in VLC at the lowest speed. You can see the movements around 0:08, 0:11, 0:21 and 0:24. Closely look at the black header.

Platforms/browsers and devices tested

• Safari 6.0.2 on Mac OS X 10.8.2 (MacBook Pro, Mid 2012).
• Chrome 24.0.1312.52 on Mac OS X 10.8.2 (MacBook Pro, Mid 2012). Problem does not occur.
• Firefox 18.0 on Mac OS X 10.8.2 (MacBook Pro, Mid 2012). Other strange things happening here.
• Safari on iOS 6.0.2 (iPad mini). Page only jumps before transition.
• Safari on iOS 6.0.2 (iPhone 5).

jQuery Mobile and jQuery core version used

• JS Bin test page: jQuery Mobile latest and jQuery 1.8.3.

[arschmitz]

@jhogervorst what browser are you using it looks like safari is that correct ? i tried this on chrome and safari on windows 7 and could not replicate. Ill check on osX mountain lion when i get home. Can you provide the exact os version number and browser version number?

[jhogervorst]

Safari 6.0.2 (8536.26.17) on OS X 10.8.2 (12C3006).

Issue occurs also in Safari on iOS 6.0.2. That's probably less configuration-specific.

[arschmitz]

@jhogervorst i am able to reproduce this on safari on OS X we will have to take a look at whats going on here.

[jaspermdegroot]

Can't reproduce it on iOS 6.01 (iPad Retina).

[arschmitz]

i cannot reproduce on ipad2 iOS 6.0.2 on ipad2 either however on OS X Mountain Lion safari 6.0.2 i can. Seems this is a very isolated issue only on OS X safari im going to mark this low priority because of this and that it is not any sort of usability or major visual problem just a 1 px shift.

[jhogervorst]

I made a video (MOV; 53.6MB — sorry about that) showing the issue in Safari on my non-jailbroken iPhone 5 running iOS 6.0.2. Again, I'd recommend playing it in VLC at the lowest speed. You can see black header bar jump at 0:07 (jump up; before transition starts) and 0:11 (jump down; after transition ended), and again at 0:18 and 0:22.

[jhogervorst]

And here's another video (MOV; 62.4MB) showing the issue in Safari on my non-jailbroken iPad mini running iOS 6.0.2. Here the issue (or a similar issue) occurs when loading another site (real reload, like data-ajax="false"). Again, I'd recommend playing it in VLC at the lowest speed. You can see the 'Restart' button jump up and down at 0:14 and 0:26.

[jaspermdegroot]

This could be a regression from 1c1c3ec and/or a timing issue similar to #5487 (comment)

Related ticket #4259

[jerryshao2012]

Actually android has the same issue. Noticed there is 1px scroll bar before the transition. After transition it will be disappear. (Galaxy Nexus with 4.2.1)

[jaspermdegroot]

We are going to review transitions for 1.4 and look into this issue as well.

[toddparker]

@uGoMobi - Wonder if this is related to our scroll to hide the URL bar.

[jaspermdegroot]

Could be. I tested this test page http://jsbin.com/owasir/48 from #3467 on Android 4.2.1 and noticed the URL bar itself is jumping 1px too.

[jaspermdegroot]

Related: #5855

[Jelmeaux]

I've just run into the exact same issue. I'm converting an iOS app to an Android app, and switched off all animations except for some slide effects for when this is appropriate (going to detailpage from listview and back for instance).

Using no effects as well as the sliding animations has the same problems as described above:
The header jumps a pixel down and the content div jumps a pixel upwards, (when sliding) the animation starts and completes and the header jumps up a pixel and the content div jumps down a pixel.

In my case, the footer stays put, because that one has a data-id and does not animate.

Currently testing on samsung Galaxy S2, android version 4.1.2.
When i get home tonight, there should be a galaxy tab 2 10.1" and a galaxy S4 for testing purposes waiting for me. I'll check these devices as well.

[Jelmeaux]

I've tested this issue since my last post on a Galaxy Tab 2 10.1" (android version 4.0.3) and a Galaxy S4 (Android 4.2.2), and both suffer from this same issue.

I use a different layout for tablet devices (based on CSS media queries), and both layouts suffer from this, so i suspect it has nothing to do with my layout.

I've ran into a similar problem when i first created this app for iOS, but this was fixed by setting data-tap-toggle="false" on my header with data-position="fixed". The problem there was that the header was 1px to large, and changing pages would make the header shift 1px. With some active scrolling, you could even manually scroll the header this 1px. But as said above, on iOS i could fix this with these settings, but these don't seem to work for android devices.

[louim]

Is there a temporary solution to prevent the jump in the meantime?

[midweststudios]

I'm really surprised more people haven't inquired about this issue. I've spent the last 2 days going through all of the JQuery script and can't find anything that would case this to happen. I really need a solution - and fast. This jump when transitioning makes my app to look unfinished.

[midweststudios]

I found the error for why the page jumps 1 px in the jquery.mobile-1.3.2.css:

.ui-mobile [data-role=page], .ui-mobile [data-role=dialog], .ui-page { top: 0; left: 0; width: 100%; min-height: 100%; position: absolute; display: none; border: 0; }

change the min-height to max-height of 100%

.ui-mobile [data-role=page], .ui-mobile [data-role=dialog], .ui-page { top: 0; left: 0; width: 100%; max-height: 100%; position: absolute; display: none; border: 0; }

[louim]

@katiehennessey, this might work if you are using something like iScroll to limit the height of the page content to always be no more than 100%, but if you have a normal page, you will lose your background when you scroll. And the jump is still there, just minimised.

IMHO it is a javascript problem. Maybe a dev @uGoMobi or @toddparker could give us pointer to where to look at? I would be willing to give it a shot, even if the temporary solution is a hacky one, as I have an app that is going in production next week. Being a Phonegap app with no browser bar at all, it makes the problem really visible.

[louim]

Testing with code from #5855 ( using $.mobile.hideUrlBar = true ) in my Phonegap application seems to have done the trick. So I guess it is definitely related to address bar hiding.

[arschmitz]

@louim this makes sense because what we do to hide the url bar in many cases is to scroll 1px this triggers the url bar hiding. with the addition of the reader in ios and bugs like this it has become apparent to us that hiding the URL bar is rather buggy this is why we added the option to disable this.

[midweststudios]

@louim my apologies, I must not have noticed the discussion was referring to Web Apps & URL. For those of you who are using Cordova / PhoneGap Build - my solution works. I have since used this on 2 other applications and have not encountered a problem (and I have scrolling without iscroll).

[ozgeek]

@midweststudios the fixe of changing min-height to max-height of 100% has worked for me ! Thanks

[veloek]

@midweststudios your min-height / max-height fix worked for me as well. Thanks
EDIT: Pages with scrolling breaks with this fix, so it was no good for me after all..

[timmebln]

@midweststudios @veloek can confirm, that the solution does not fix the problem for longer pages, e.g. with dynamic content.
Also none of the above provided solutions , e.g. settings, fix the problem in my case.
Has anyone else a solution?

Thanks :)

edit:
If I choose animation "flow" the problem doesn't occur.

[rtorrero]

Fix from @louim seems to work here, thanks.

[robsonselzelin]

None of the above solutions worked for me. What I did to fix the problem was this:

$(document).on("pageinit", ".myPageSelector", function(event){
var $page = $(this);
$page.css("top", "-1px");
});

My environment is:

• Nexus X
• Android 4.1.1
• jQuery 1.9.1
• jQuery Mobile 1.3.2
• Phonegap 3.0

[fernandoacorreia]

@robsonselzelin's solution resolved the issue for me on Chrome v. 32, Linux Mint, jQuery Mobile 1.4.0, jQuery 1.10.2.

My code:

$(document).on('pageinit', function (event) {
  $('#' + event.target.id).css('top', '-1px');
});

[Ruffio]

I can see that this issue was initially submitted a year ago and it is labels as high priority.
Mayby we have a different understanding of 'high priority', but please remove the label if there is no intension of fixing this within a reasonable time.

[Ruffio]

I have seen the video and can see the problem. In slide transition there is a 1px scroll and it is easy to see.

I have used the test page from the first post, but can not reproduce it.
I have tested on Windows 7 x64:
IE11
Chrome 38
FX 33

Android 4.4.4
Nexus 7 Chrome browser

Android 4.4.2
LG 3 Chrome browser

iOS 7.1.2
iPad 3 Safari

@jhogervorst, @fernandoacorreia, @robsonselzelin, @jerryshao2012 and @Jelmeaux do you still experience the scrolling on the test page? http://jsbin.com/amozef/98

[jhogervorst]

I've tested the old testing page again (still running jQM 1.3.2), and a new testing page running the current latest version. I also cannot reproduce the issue any more.

Platforms/browsers and devices tested:

• Safari 7.1 (9537.85.10.17.1) on Mac OS X 10.9.5 (13F34)
• Chrome 38.0.2125.111 on Mac OS X 10.9.5 (13F34)
• Firefox 31.0, 32.0.2, and 33.1 on Mac OS X 10.9.5 (13F34)
• Safari on iOS 8.1 (12B411) on iPhone 6
• Safari on iOS 8.0 (12A365) on iPad mini Retina

Could it've been some browser problem that was fixed in Safari/WebKit?

[Ruffio]

That is what I'm thinking too since the old test page doesn't show it
anymore...
Den 10/11/2014 17:43 skrev "Jonathan" notifications@github.com:

I've tested the old testing page http://jsbin.com/amozef/98/ again
(still running jQM 1.3.2), and a new testing page
http://jsbin.com/yumogogami/1/ running the current latest version. I
also cannot reproduce the issue any more.

Platforms/browsers and devices tested:

• Safari 7.1 (9537.85.10.17.1) on Mac OS X 10.9.5 (13F34)
• Chrome 38.0.2125.111 on Mac OS X 10.9.5 (13F34)
• Firefox 31.0, 32.0.2, and 33.1 on Mac OS X 10.9.5 (13F34)
• Safari on iOS 8.1 (12B411) on iPhone 6
• Safari on iOS 8.0 (12A365) on iPad mini Retina

Could it've been some browser problem that was fixed in Safari/WebKit?

—
Reply to this email directly or view it on GitHub
#5488 (comment)
.

[arschmitz]

@jhogervorst @Ruffio thanks for testing this and confirming its been fixed im going to close this now as fixed by the browser.

[hjspeerstra]

I know this issue is marked as closed. But i want to share the way I fixed this problem.

I'm using JQM 1.4.5 and my pagecontainer is not the body element but a container div.
I had to override some styles to make the height 99.9% on the container div instead of on the body element.

.ui-mobile,
.ui-mobile body {
    height: auto;
}
#container {
    height: 99.9%;  
}

Actually applying these styles gave me the headaches... At least for the 'fade' and 'slide' transitions. With these styles the 1px jump occured.

After looking into the core of JQM 1.4.5 I found this line:

// hide iOS browser chrome on load if hideUrlBar is true this is to try and do it as soon as possible
if ( $.mobile.hideUrlBar ) {
    window.scrollTo( 0, 1 );
}

So I tried to set $.mobile.hideUrlBar to false (which is by default true).

$(document).bind("mobileinit", function() {
    $.mobile.pageContainer = $("#container"); /* different pagecontainer (not <body>) */
    $.mobile.hideUrlBar = false;
});

Setting hideUrlBar to false fixed the 1px jump for me!

The only pitfall with this solution is that you lose the functionality of hiding the address bar on init.

[veloek]

@hanspeerstra Thanks for this :) It solved it for me - finally!!

[hjspeerstra]

@veloek I ended up doing a slightly different approach. It's not the best solution because it changes the core of JQM.

Search for this line:

$.mobile.defaultHomeScroll = ( !$.support.scrollTop || $.mobile.window.scrollTop() === 1 ) ? 0 : 1;

And change it to:

$.mobile.defaultHomeScroll = ( !$.support.scrollTop || $.mobile.window.scrollTop() === 1 ) ? 0 : 0;

This prevents the following:
When you scroll on a long page and then navigate to an ajax loaded page which is also a long page. On the second page you are not going to the top of the page which is generally required.
If you apply the adjustments above, it should be fixed. The $.mobile.hideUrlBar can be set to anything in this case.

I have tested this on iOS Safari (also homescreen), iOS Chrome and OSX Chrome, OSX Safari.

[kanadon]

I'm still struggling with this :(

UPD
hanspeerstra's method works!