Support animating webview when keyboard appears #22

hjellek · 2016-04-15T07:19:35Z

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.

…en keyboard appears/disappears

cjpearson · 2016-04-21T23:02:00Z

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?

hjellek · 2016-04-22T12:35:51Z

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.

ajp8164 · 2016-09-29T14:58:35Z

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.

ajarbol · 2017-02-08T13:39:02Z

@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...

hjellek · 2017-02-10T10:24:18Z

@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!

kialc · 2017-07-24T11:31:05Z

Any news on a fix for this (using WKWebView)?

bugignat · 2017-07-27T10:18:33Z

waiting for the solution of the problem...

Aarbel · 2018-01-14T15:14:37Z

@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-engine and we use in-app browser with window.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

…s through JS<->Native bridge have correct timing

hjellek · 2018-01-16T13:32:41Z

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:

Aarbel · 2018-01-17T12:16:27Z

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);
}

Aarbel · 2018-01-17T12:17:44Z

ps: if you implement css animation, i could spent 1 hour to make the right bezier animation that fits with the ios' keyboard animation ;)

hjellek · 2018-01-17T12:35:46Z

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');
    }
});

Aarbel · 2018-01-17T12:54:09Z

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 ?

cjpearson · 2018-01-24T23:45:18Z

@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.

cjpearson · 2018-01-24T23:55:46Z

@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.

Fix for issue cjpearson#20

Aarbel · 2019-08-22T20:58:52Z

@cjpearson any news for merge ?

Aarbel · 2019-11-30T22:42:16Z

@cjpearson @hjellek any news for this PR ?

hjellek · 2019-12-02T19:13:17Z

@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.

Aarbel · 2019-12-03T17:16:20Z

@hjellek
Doesn't look like any other solutions exist

Aarbel · 2020-07-31T10:51:34Z

@cjpearson do you plan to work on it ?

Aarbel · 2020-10-28T16:25:06Z

@cjpearson @hjellek would be really great to merge this branch,
do you need something to work on it ? Freelance mission for example

BrOrlandi · 2021-02-22T18:10:08Z

Any updates on this? I tested on iOS 14 and it doesn't work. Did I make something wrong and it should work?

Aarbel · 2022-04-13T09:58:25Z

@cjpearson do you think you will maintain this part some day ?

Knut Eirik Leira Hjelle added 5 commits April 14, 2016 12:55

Added support for animating in JS before changing the webview size wh…

c1e3473

…en keyboard appears/disappears

Updated README.

dc39380

Removed logging and tried to adhere to codestyle.

66c7ff7

Fixed link.

49bbad8

Updated README.

eb1c867

hjellek added 4 commits January 16, 2018 10:36

Merge branch 'master' into task/SupportAnimatingKeyboard

664c99e

Refactored to set enable/disable animation instead of relying on call…

ca2dff4

…s through JS<->Native bridge have correct timing

Updated header

166d194

Updated readme

254d658

ccorcos pushed a commit to ccorcos/cordova-plugin-keyboard that referenced this pull request Jul 24, 2018

Merge pull request cjpearson#22 from TheMattRay/master

db0d327

Fix for issue cjpearson#20

Aarbel mentioned this pull request Aug 26, 2018

Webview resizes faster than keyboard pops up (white flash) #76

Open

Aarbel approved these changes Aug 22, 2019

View reviewed changes

Aarbel mentioned this pull request Feb 3, 2020

Question: Does this plugin support smooth shrink keyboard animation ? ionic-team/cordova-plugin-ionic-keyboard#142

Open

Aarbel mentioned this pull request Jul 28, 2020

Question: can we use native keyboard as simple keyboard, with shrink view animation EddyVerbruggen/cordova-plugin-native-keyboard#118

Closed

Aarbel mentioned this pull request Apr 13, 2022

feat(keyboard): Animate webview on keyboard open / close ionic-team/capacitor-plugins#923

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support animating webview when keyboard appears #22

Support animating webview when keyboard appears #22

hjellek commented Apr 15, 2016

cjpearson commented Apr 21, 2016

hjellek commented Apr 22, 2016

ajp8164 commented Sep 29, 2016

ajarbol commented Feb 8, 2017

hjellek commented Feb 10, 2017

kialc commented Jul 24, 2017

bugignat commented Jul 27, 2017

Aarbel commented Jan 14, 2018 •

edited

Loading

hjellek commented Jan 16, 2018

Aarbel commented Jan 17, 2018

Aarbel commented Jan 17, 2018

hjellek commented Jan 17, 2018

Aarbel commented Jan 17, 2018 •

edited

Loading

cjpearson commented Jan 24, 2018

cjpearson commented Jan 24, 2018

Aarbel commented Aug 22, 2019

Aarbel commented Nov 30, 2019

hjellek commented Dec 2, 2019

Aarbel commented Dec 3, 2019 •

edited

Loading

Aarbel commented Jul 31, 2020

Aarbel commented Oct 28, 2020

BrOrlandi commented Feb 22, 2021

Aarbel commented Apr 13, 2022

Support animating webview when keyboard appears #22

Are you sure you want to change the base?

Support animating webview when keyboard appears #22

Conversation

hjellek commented Apr 15, 2016

cjpearson commented Apr 21, 2016

hjellek commented Apr 22, 2016

ajp8164 commented Sep 29, 2016

ajarbol commented Feb 8, 2017

hjellek commented Feb 10, 2017

kialc commented Jul 24, 2017

bugignat commented Jul 27, 2017

Aarbel commented Jan 14, 2018 • edited Loading

hjellek commented Jan 16, 2018

Aarbel commented Jan 17, 2018

Aarbel commented Jan 17, 2018

hjellek commented Jan 17, 2018

Aarbel commented Jan 17, 2018 • edited Loading

cjpearson commented Jan 24, 2018

cjpearson commented Jan 24, 2018

Aarbel commented Aug 22, 2019

Aarbel commented Nov 30, 2019

hjellek commented Dec 2, 2019

Aarbel commented Dec 3, 2019 • edited Loading

Aarbel commented Jul 31, 2020

Aarbel commented Oct 28, 2020

BrOrlandi commented Feb 22, 2021

Aarbel commented Apr 13, 2022

Aarbel commented Jan 14, 2018 •

edited

Loading

Aarbel commented Jan 17, 2018 •

edited

Loading

Aarbel commented Dec 3, 2019 •

edited

Loading