{"action":"created","issue":{"url":"https://api.github.com/repos/jquery/jquery-mobile/issues/5488","labels_url":"https://api.github.com/repos/jquery/jquery-mobile/issues/5488/labels{/name}","comments_url":"https://api.github.com/repos/jquery/jquery-mobile/issues/5488/comments","events_url":"https://api.github.com/repos/jquery/jquery-mobile/issues/5488/events","html_url":"https://github.com/jquery/jquery-mobile/issues/5488","id":10114797,"number":5488,"title":"Page scrolls 1px before and after transition","user":{"login":"jhogervorst","id":304065,"avatar_url":"https://avatars.githubusercontent.com/u/304065?v=3","gravatar_id":"","url":"https://api.github.com/users/jhogervorst","html_url":"https://github.com/jhogervorst","followers_url":"https://api.github.com/users/jhogervorst/followers","following_url":"https://api.github.com/users/jhogervorst/following{/other_user}","gists_url":"https://api.github.com/users/jhogervorst/gists{/gist_id}","starred_url":"https://api.github.com/users/jhogervorst/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jhogervorst/subscriptions","organizations_url":"https://api.github.com/users/jhogervorst/orgs","repos_url":"https://api.github.com/users/jhogervorst/repos","events_url":"https://api.github.com/users/jhogervorst/events{/privacy}","received_events_url":"https://api.github.com/users/jhogervorst/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/jquery/jquery-mobile/labels/Component:%20Transitions","name":"Component: Transitions","color":"DDDDDD"},{"url":"https://api.github.com/repos/jquery/jquery-mobile/labels/Priority:%20High","name":"Priority: High","color":"ff7519"},{"url":"https://api.github.com/repos/jquery/jquery-mobile/labels/Tag:%20URL%20bar","name":"Tag: URL bar","color":"DDDDDD"}],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":34,"created_at":"2013-01-18T21:52:52Z","updated_at":"2015-06-03T20:53:38Z","closed_at":"2014-11-10T17:59:27Z","body":"## Issue description\r\n\r\nIf 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.\r\n\r\n## Test page\r\n\r\n[Here's a test page.](http://jsbin.com/amozef/98) I took the latest CSS and replaced all occurrences of \"ms;\" with \"0ms;\". Therefore all transitions are ten times slower.\r\n\r\nOpen the page and click a button. There's a button for each transition. I think \"Slide\" gives a good view of the problem.\r\n\r\nClosely look at the header (or button) in the second page when the transition ends. You'll see that it moves down 1px.\r\n\r\nI recorded a video of the problem on my Mac. Here's the [MOV file](http://cl.ly/2F2B0W3w2O3y) (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.\r\n\r\n## Platforms/browsers and devices tested\r\n\r\n* Safari 6.0.2 on Mac OS X 10.8.2 (MacBook Pro, Mid 2012).\r\n* Chrome 24.0.1312.52 on Mac OS X 10.8.2 (MacBook Pro, Mid 2012). **Problem does not occur.**\r\n* Firefox 18.0 on Mac OS X 10.8.2 (MacBook Pro, Mid 2012). **Other strange things happening here.**\r\n* Safari on iOS 6.0.2 (iPad mini). **Page only jumps before transition.**\r\n* Safari on iOS 6.0.2 (iPhone 5).\r\n\r\n## jQuery Mobile and jQuery core version used\r\n\r\n* JS Bin test page: jQuery Mobile latest and jQuery 1.8.3."},"comment":{"url":"https://api.github.com/repos/jquery/jquery-mobile/issues/comments/108613536","html_url":"https://github.com/jquery/jquery-mobile/issues/5488#issuecomment-108613536","issue_url":"https://api.github.com/repos/jquery/jquery-mobile/issues/5488","id":108613536,"user":{"login":"hanspeerstra","id":1712863,"avatar_url":"https://avatars.githubusercontent.com/u/1712863?v=3","gravatar_id":"","url":"https://api.github.com/users/hanspeerstra","html_url":"https://github.com/hanspeerstra","followers_url":"https://api.github.com/users/hanspeerstra/followers","following_url":"https://api.github.com/users/hanspeerstra/following{/other_user}","gists_url":"https://api.github.com/users/hanspeerstra/gists{/gist_id}","starred_url":"https://api.github.com/users/hanspeerstra/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/hanspeerstra/subscriptions","organizations_url":"https://api.github.com/users/hanspeerstra/orgs","repos_url":"https://api.github.com/users/hanspeerstra/repos","events_url":"https://api.github.com/users/hanspeerstra/events{/privacy}","received_events_url":"https://api.github.com/users/hanspeerstra/received_events","type":"User","site_admin":false},"created_at":"2015-06-03T20:53:38Z","updated_at":"2015-06-03T20:53:38Z","body":"I know this issue is marked as closed. But i want to share the way I fixed this problem.\r\n\r\nI'm using JQM 1.4.5 and my pagecontainer is not the body element but a container div.\r\nI had to override some styles to make the height 99.9% on the container div instead of on the body element.\r\n\r\n<style>\r\n.ui-mobile,\r\n.ui-mobile body {\r\n\theight: auto;\r\n}\r\n#container {\r\n\theight: 99.9%;\t\r\n}\r\n</style>\r\n\r\nActually applying these styles gave me the headaches... At least for the 'fade' and 'slide' transitions. With these styles the 1px jump occured.\r\n\r\nAfter looking into the core of JQM 1.4.5 I found this line:\r\n\r\n// hide iOS browser chrome on load if hideUrlBar is true this is to try and do it as soon as possible\r\nif ( $.mobile.hideUrlBar ) {\r\n\twindow.scrollTo( 0, 1 );\r\n}\r\n\r\nSo I tried to set $.mobile.hideUrlBar to false (which is by default true) and this fixed the 1px jump for me.\r\n\r\n<script>\r\n$(document).bind(\"mobileinit\", function() {\r\n    $.mobile.pageContainer = $(\"#container\"); /* different pagecontainer (not <body>) */\r\n    $.mobile.hideUrlBar = false;\r\n});\r\n</script>\r\n\r\nThe only pitfall to this solution is that you lose the functionality of hiding the address bar on init."}}