When the virtual keyboard in iOS Safari is running, it makes my CSS transitions flicker. How can this be fixed?
In Mobile Safari, it seems that switching the webkit while firing the virtual keyboard (i.e. sliding up) causes flickering, sometimes even skipping animation entirely.
It even seems to flicker / judge even if I put on it transition-delay
.
It's strange that the animation is smooth to blur (keyboard padding).
I can reproduce the problem in a JSFiddle here: (open it in iOS)
The JSFiddle is below:
You can see that focusing / clicking on the input element will skip animation most of the time. Sometimes it works great.
Does anyone know of a workaround for this? It looks like it should have met before, but I cannot find any information on this.
source to share
I was able to see the transitions here .
I added box.move to your 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 do animations and transitions.
Edit:
I made some extra flickering mess on your transition and I was able to remove any jumping / flickering that happened before. Here is a fiddle .
-webkit-transition: -webkit-transform cubic-bezier(0.32, 0, 0.68, 1) 500ms;
The only thing I can guess is the reason for this is the frame rate at which the browser can handle the transition. Thus, by reducing the amount of movement of the element, we can remove the flickering effect. This may be why the default browser for video should open the video player. I don't think the mobile Safari browser was built to move 300px elements in 500ms, smoothly.
source to share