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.