4

On Mobile Safari, it seems that webkit transitions while the virtual keyboard is firing (i.e. sliding upward), causes a flicker, sometimes it even skips the animation entirely.

It seems it even flickers/judders even if I put a transition-delay on it.

The odd thing is that the animation is smooth on blur (keyboard retreats).

I'm able to replicate the problem in a JSFiddle here: (open it in iOS)

JSFiddle is included below:

http://jsfiddle.net/5w0fj2rx/

You can see that focusing/tapping on the input element will skip the animation most of the time. Sometimes it works fine.

Anyone know of a workaround for this? It seems like something that should've been encountered before, but I can't find any information on it.

Calvin
  • 8,697
  • 7
  • 43
  • 51
  • Try adding `-webkit-backface-visibility: hidden;` ([demo](http://jsfiddle.net/5w0fj2rx/5/))... I don't have Safari to test it. – Mottie Sep 03 '14 at 16:12
  • Tried that http://jsfiddle.net/5w0fj2rx/4 here as well - no dice. – Calvin Sep 03 '14 at 19:29
  • I'm using iOS7 on iPhone 5s, it shows fine to me. I tried your fiddle link on safari as well as chrome browser. – CodeMonk Sep 04 '14 at 07:08
  • @CodeMonk i'm on a 5S too, and it skips at least some frames of the animation. can you double check? – Calvin Sep 05 '14 at 20:16
  • Could you try adding the CSS properties as described [here](http://stackoverflow.com/a/3461770/1209356)? More specifically `-webkit-transform: translate3d(0, 0, 0)` to see if pushing the transitioning element to its own ‘layer’ helps, or `-webkit-perspective: 1000` in combination with the previously mentioned `-webkit-backface-visibility: hidden`. – Hein Haraldson Berg Sep 09 '14 at 11:07
  • Try adjusting your transition – mcphersonjr Sep 10 '14 at 21:13
  • Did you find an answer yet? – mcphersonjr Sep 23 '14 at 18:31

1 Answers1

2

I was able to see the transitions here.

I added to your box.move element.

#box.move {
  -webkit-transform: translate3d(300px, 0, 0);
-webkit-backface-visibility: hidden;
}

Additionally... You are already using jQuery, so I would use that instead of CSS to perform animations and transitions.

Edit:

I did some additional messing around with the easing on your transition and I was able to remove any jumping/flickering the transition did before. Here is the fiddle.

-webkit-transition: -webkit-transform cubic-bezier(0.32, 0, 0.68, 1) 500ms;

The only thing I can assume is the reason behind this, is the frame rate at which the browser is able to process the transition. So by reducing the amount that the element moves at first we can remove the the flicker effect. This might be why the browser default for videos is to open the video player. I don't think the mobile safari browser was built for moving elements 300 pixels in 500ms, smoothly.

mcphersonjr
  • 733
  • 12
  • 35