Slide in does not work in iOS 5

[sdsykes]

It seems that translateX(100%) does not work in the latest iOS.

I'm loading the new content from a url, and the problem causes the new page to appear over the top of the old one for a second, before sliding in as it should, pushing itself out of the way. It doesn't look good.

The best I could do is to change the code as follows (in jqtouch.css):

/* Slide */

#jqt .slide.start {
    -webkit-transition-property: -webkit-transform;
}

#jqt .slide.in,  #jqt .slide.out.reverse.start {
  -webkit-transform: translateX(95%);
}

#jqt .slide.out.start, #jqt .slide.in.reverse {
  -webkit-transform: translateX(-95%);
}
...

If you use 96% or more the translateX directive appears to do nothing. Any ideas on how to fix this properly?

[thomasyip]

I observed the behaviour on Chrome. Safari 4.1 seem to have problem too (20% of the time?). Seem to be fine on iPad (iOS 4.x). Was it what you see too?

I spent 2 night and couldn't figure a workaround. I think I might have to separate split-view vs singular view. But, I haven't had a chance to try it on iOS 5.0.

[sdsykes]

Yes, that's what I see.

I ended up natively implementing my feature for iOS with a uinavigationcontroller as I couldn't seem to figure any better fix.

[thomasyip]

Many new webkit browser doesn't support the animation with "flexible box". Look like I have to revamp a lot of those. Won't able to get to that too soon.

Thanks for reporting.

[rexeany]

I upgraded to iOS 5 and now I'm having this issue with all my apps that I made with this framework.
The problem looks to be only with the slide animation, because some pages with fade animation work without problem.
Also I found that using iPad split view, the slide issue affect only the right section of the screen the "main" section not the "aside".
Is the reason maybe the Nitro engine of Safari?

[thomasyip]

It is the new css engine on the way transform3d applied on flexible box.

I wasn't able to work around it. I might have to break back-compatiblity and require you to update index.html later.

[rexeany]

Thanks for the answer.
It won't be a problem to update the index.html, it's important just that apps work well. I hope to ear news about that soon.
Many thanks

[NickWallbridge]

I think I am seeing the same issue in iOS5. I click the button to navigate to a new page, the new page immediatley and momentarily appears, then slides away in the correct animation direction, but leaves a white screen. Once the animation is complete the new page then appears. There is also a similar issue on a "confirm" form, which leaves the underlying page out of position. It all works fine in iOS4.3 and below. Can you confimr this is the same problem?

[NickWallbridge]

A quick (and very temporary) workaround is to add "useAnimations: false" to the instantiation of jQT:

var jQT = $.jQTouch({
...
useAnimations: false
...
});

Of course that does mean NO ANIMATIONS take place, so is definitley not a long (or even medium) term fix.

My tests show that otherwise:

slide (default) - fails
slideup - fails
cube - fails
pop - ok
dissolve - ok
fade - ok
flip - ok
swap - ok

[thomasyip]

Finally, fixed (worked around). Sorry for taking this long. I spent many nights on it over the last 2 months, but couldn't figure it out until now.

The problem was that the newer webkit (including Safari 5, Chrome, iOS5) has two new behaviours (bug?)

1. when you do transform* or transform3d, it will scroll to the right-most, buttom-most visible area.
2. transform3d does not respect z-index.

Tried to restructure the css, timing, use javascript to scroll etc. None of those work.

The final solution was

1. using "position: fixed" for #jqt div.
2. use transformZ(0.01px) non animating pane (when iPhone splitview is used)

[rexeany]

Wonderful! Works great!!!

[NickWallbridge]

Thank you for your efforts - my initial tests look good.

Do you have a PayPal donation page?

-----Original Message-----
From: Thomas @ BeeDesk [mailto:reply@reply.github.com]
Sent: 09 November 2011 02:25
To: NickWallbridge
Subject: Re: [jQTouch] Slide in does not work in iOS 5 (#33)

Finally, fixed (worked around). Sorry for taking this long. I spent many nights on it over the last 2 months, but couldn't figure it out until now.

The problem was that the newer webkit (including Safari 5, Chrome, iOS5) has two new behaviours (bug?)

1. when you do transform* or transform3d, it will scroll to the right-most, buttom-most visible area.
2. transform3d does not respect z-index.

Tried to restructure the css, timing, use javascript to scroll etc. None of those work.

The final solution was

1. using "position: fixed" for #jqt div.
2. use transformZ(0.01px) non animating pane (when iPhone splitview is used)

---

Reply to this email directly or view it on GitHub:
#33 (comment)

[thomasyip]

The last workaround / patch caused a problem: when you scroll up while the view is already at its bottom, it caused the lower part of the view clipped.

It is a behaviour of mixing "position: fixed" and "position: absolute".

It is now fixed as well.