Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Page padding should be applied before transition starts #5487
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.
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
jQuery Mobile and jQuery core version used
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
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.
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 (
This relatively simple page (just eight input elements with some text) is heavy enough to cause the problem in:
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.)
I see the issue. It appears to be a timing problem. On iOS6 on
Thanks for The Black Keys ;)
referenced this issue
Jan 21, 2013
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.