Page padding should be applied before transition starts

[jhogervorst]

Issue description

If you navigate to a page with a fixed header using a transition, the page padding is calculated after the transition ends. This causes the page content to move suddenly.

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 content of the second page when the transition ends. You'll see that it moves down a few pixels.

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).
• Firefox 18.0 on Mac OS X 10.8.2 (MacBook Pro, Mid 2012). More strange things happening during transition here.
• Safari on iOS 6.0.2 (iPad mini).

jQuery Mobile and jQuery core version used

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

Other relevant information

The issue does not happen when you navigate to a page stored in the DOM for the second time, because the padding is already known in that situation. Because of that you should restart my test page after trying.

The issue happens also when there's a navbar in the header. The effect is even worse.

It seems like the method _handleAnimationStart on line 108 of js/widgets/fixedToolbar.js never gets called, probably due to wrong events stated on line 92 of the same file.

[jhogervorst]

The fix works great for the original issue.

However, currently the whole page (including the fixed header and content) move down 1 pixel after the transition ended. It seems like the page is scrolled 1 pixel down before the transition starts, and scrolled up again after the animation finishes. This is probably an unrelated issue, so if you'd like me to create a new issue for it, I'd be happy to do so.

Addition: this happens in Safari on my Mac and iPad (and not in Chrome). Furthermore this seems to happen during page load as well. Hm, I'll create a new issue for this.

[arschmitz]

@jhogervorst can you try and reproduce this with out panels? we had a similar issue previously but we thought it was fixed. Either way if you could open a new issue for this and make a simple jsbin to demonstrate we will take a look.

[jhogervorst]

I don't see a button to re-open the issue, but consider it re-opened.

Unfortunately the provided fix does not work in all cases: when you are transitioning to a more complex page, the issue still occurs.

I've made a new test page. The difference between the test page provided earlier is that I use the latest CSS (without slowing down the transitions), and that I added a listview with some form fields on the second page.

You should open the page, click a transition (slide still preferred) and closely look at the content just below the header during the transition. You'll see that the first row is not fully visible and jumps down when the transition nearly ends.

This relatively simple page (just eight input elements with some text) is heavy enough to cause the problem in:

• Safari on iOS 6.0.2 (iPad mini);
• Safari on iOS 6.0.2 (iPhone 5); and
• Safari on iOS 6.0.1 (iPad, 3rd gen.).

The issue does not occur in Safari 6.0.2 and Chrome 24.0.1312.52 on Mac OS X 10.8.2, so I guess it's related to the less powerful CPU/GPU of the iOS devices.

I've made a video (MOV; 31.3MB) this time as well. If you play it at the lowest speed in VLC, you can see the problem at 0:03 and 0:09. (You might want to mute the audio — the song that was on was too good to pause, so it's included as well.)

[jaspermdegroot]

@jhogervorst

I see the issue. It appears to be a timing problem. On iOS6 on pagebeforeshow the padding-top of the second page is 2px. We set a default padding for .ui-page-header-fixed, but it looks like on pagebeforeshow this class has not been added yet. Calling updatePagePadding before starting the transition won't help because, again on pagebeforeshow, the height of the header is 0px.
Re-opening.

Thanks for The Black Keys ;)

[Ruffio]

What is the status of this defect? Any progress?

I use margin-top to vertically center content of pages: http://mbrevis.com/

It is not just a few pixels, it can be many depending of the height, so the content traveling down the screen is indeed noticeable :-( On computers you will not notice this, but on Android/Chrome you definitely can. I haven't tested it on iOS but I guess that the problem is the same.

While waiting for a fix, is there any way to workaround this?

Kindly regards Rasmus Christiansen.

[Ruffio]

This issue was raised a year ago and has the label 'priority: medium'. I asked for a comment a month ago and is still waiting for a reply. I suggest that the label 'priority medium' is removed because of lack of...

[apsdehal]

I am closing this as super old and not being able to reproduce with latest 1.5-dev.