cordova-plugin-keyboard
cordova-plugin-keyboard copied to clipboard
cjpearson
Support animating webview when keyboard appears
An attempt to fix #13 for iOS so that animation is possible while the keyboard appears and disappears.
The approach is based on the project https://github.com/glyuck/GLKAnimateWebViewFrame with some modifications, and the only issue for me so far is that it seems like the webview content freezes for most of the time while animating the keyboard in, and then plays the whole animation. When the keyboard animates out the webview content seems to be able to animate as expected.
Comments and suggestions are appreciated.
Thanks for the PR. This issue has bugged me for a while. I like the approach of letting the user define their own JS animation. The reason I didn't include GLKAnimateWebViewFrame was because the animation may not work for everything.
Have you tried using this with WKWebView?
Yeah, I've spent some time trying to figure out a way that works as well. So far, this has been the closest to a good solution, even though it bugs me that the content seems to freeze while the keyboard animates in.
I have not tried it with WKWebView yet. Once I am back from vacation I can look into setting up a demo with it.
Does this enhancement work and will it be accepted. I worked around it by adding a transition animation to by content that closely resembles the native transition (ease in/out). It works fine but it would be better to have it done by this plugin.
@hjellek did you ever get this to animate with the keyboard onOpen? I've looked into it quite a bit, but never could figure out why the animations are queued on the focus event, but not the blur. GLKAnimateWebViewFrame is smooth, but does not actually implement the keyboard...
@ajarbol unfortunately, no. I have not checked if there has been any changes in later versions of iOS that could be used either. Should perhaps look into it again, would be nice to get it working properly onOpen as well!
@cjpearson @shazron @stevengill @hjellek when could we definitely fix this issue ?
Clean keyboard interaction is very important for Cordova ... Thanks again for this plugin, we are close of full ios hack !
Here is an other example : Keyboard open / close creates ugly glitch with our app
- Cordova is just a wrapper for our web app, we use plugin
cordova-plugin-wkwebview-engineand we use in-app browser withwindow.location = 'https://ourresponsiveapp.com').- when keyboard is Opening, i can't find the origin of the white space (it's not the
<html>or the<body>of Cordova, nor the<html>or<body>of our web app wrapped by Cordova webview.- when keyboard is Closing you can see the
<html>red background of the web app- i slowed down a little bit the video to clearly see what happens
Sorry for the really late response from my side.
My branch has been updated to work with WKWebView now. Had to change the implementation slightly since the timing between JS and native code seemed to have changed since my last attempt, but I think the implementation is better now anyway.
Here are some crude screenshots from our app running on iPhone 5s (the JS implementation is not optimized whatsoever, basically the demo code from the README)
Without animation:
With animation:
Great @hjellek !
Have you tried with CSS 3D Acceleration hack instead of javascript animation ?
Javascript animations take a lot of CPU on a mobile, and make the animation lagging / slowing. Css 3D acceleration use the GPU of the phone which is much faster and linear, cf https://www.urbaninsight.com/article/improving-html5-app-performance-gpu-accelerated-css-transitions
An example :
body {
height: $fromHeight;
transform: transale3d(0,0,0);
transition: all 1s;
}
body .keyboard-open {
height: $toHeight;
transform: translateZ(0);
}
ps: if you implement css animation, i could spent 1 hour to make the right bezier animation that fits with the ios' keyboard animation ;)
I haven't focused too much on the client side of the animation yet. Basically, the animator function receives a notification when the keyboard begins to animate, and the animationComplete callback needs to be called when the client is finished animating.
Something along the lines of this completely untested code should work for CSS transitions I think:
Keyboard.setKeyboardAnimator(function(fromHeight, toHeight, animationDurationInMs, animationCompleteCallback)
{
var body = document.querySelector('body');
var transitions = {
'transition': 'transitionend',
'OTransition': 'oTransitionEnd',
'MozTransition': 'transitionend',
'WebkitTransition': 'webkitTransitionEnd'
};
var transition = "";
for (var t in transitions)
{
if (body.style[t] !== undefined)
{
transition = transitions[t];
break;
}
}
body.addEventListener(transition, function()
{
animationCompleteCallback();
});
if(fromHeight < toHeight)
{
body.classList.remove('keyboard-open');
}
else
{
body.classList.add('keyboard-open');
}
});
Ok i'll try it this afternoon !
Otherwise the webview seems to be resized by cordova-plugin-keyboard at the end of the ios keyboard animation.
One thought about this :
- Maybe we will bypass these king of weird behaviors if we directly resize the body and not the webview when keyboard opens... Resizing webview often create glitch effects with body background, even on desktop What do you think @hjellek @cjpearson ?
@hjellek, thanks for updating this PR! I like the general approach here. I was hesitant to include a JavaScript solution since it likely would not work for every app. Allowing users to define their own animation function should get around this. Also, the docs are appreciated. shrinkViewKeyboardWillChangeFrame: has had some issues in the past, so I'll want to test a few configurations first.
@Aarbel, regarding your first comment I think the whitespace is either part of the app's view controller or one of the WebView's views. I don't recall which, but I explored it a while ago when I first tackled this bug. https://stackoverflow.com/q/27923648/754604
I think one modification we could make is providing a similar animator function when ShrinkView is disable. Then users could shrink the body or any other element with JavaScript. You could try adding a handler to the keyboardHeightWillChange event, but I'm not sure if that provides enough information.
@Aarbel sorry, no news on my end. I have not used this in quite a while now, and am not developing anything with Cordova these days.
No idea if this still works, or even is the best solution anymore.
@cjpearson @hjellek would be really great to merge this branch, do you need something to work on it ? Freelance mission for example
Any updates on this? I tested on iOS 14 and it doesn't work. Did I make something wrong and it should work?
