ionic-team / capacitor-plugins

Official plugins for Capacitor ⚡️
509 stars 577 forks source link

Keyboard resize is slow in iOS #1904

Open aeharding opened 10 months ago

aeharding commented 10 months ago

Bug Report

Plugin(s)

Keyboard

Capacitor Version

💊   Capacitor Doctor  💊

Latest Dependencies:

  @capacitor/cli: 5.5.1
  @capacitor/core: 5.5.1
  @capacitor/android: 5.5.1
  @capacitor/ios: 5.5.1

Installed Dependencies:

  @capacitor/cli: 5.2.3
  @capacitor/android: 5.2.3
  @capacitor/core: 5.2.3
  @capacitor/ios: 5.2.3

Platform(s)

iOS

Current Behavior

On iOS, the app is incorrectly resized after the keyboard animation finishes, not before.

On Android, web view is correctly resized before keyboard animation starts.

Expected Behavior

Web view is resized before keyboard animation starts.

Code Reproduction

https://github.com/aeharding/test-keyboard-slow

Other Technical Details

iOS incorrect behavior

https://github.com/ionic-team/capacitor-plugins/assets/2166114/888abf46-c036-4959-9738-49140f91848a

Android correct behavior

https://github.com/ionic-team/capacitor-plugins/assets/2166114/feaadf20-688f-40e8-8a1d-a1df67c329bd

Additional Context

Original issue that got closed as stale: https://github.com/ionic-team/capacitor/issues/1540

stephan-fischer commented 8 months ago

@aeharding Yes i use capacitor 4 and not 5 because since capacitor 5 the keyboard closing on ios is really slow. And on closing a white background is flickering on my dark themed app.

Achder commented 6 months ago

I'm having the same issue. I took a quick look at the code and I'm wondering if this line is the culprit: https://github.com/ionic-team/capacitor-plugins/blob/d5483ce9f666f1a38c25a11e63899fd35701ca45/keyboard/ios/Plugin/Keyboard.m#L145

It adds a delay to keyboard resizing code. The delay has of length of UIKeyboardAnimationDurationUserInfoKey + 0.2 seconds The delay is smaller when hiding the keyboard which is probably why hiding is a bit smoother.

With the current code we can't apply this fix correctly: https://github.com/ionic-team/capacitor/issues/1540#issuecomment-735221275

With the delay in place the transition animation will start late and therefore the content will resize late again.

Achder commented 6 months ago

@dallastjames could you maybe look into this PR https://github.com/ionic-team/capacitor-plugins/pull/1634 This issue widens the native <> capacitor divide. It makes the app feel less native which is a big problem

Achder commented 5 months ago

@aeharding Did you by any chance find a workaround for this?

Achder commented 5 months ago

I fiddled around with the code and removed the delay I mentioned above. Without the delay the experience is much better. I'd love to provide a PR to fix this but I don't have enough inside into why the delay is hardcoded in the first place. @dallastjames could comment on the issue?

Reiserro commented 4 months ago

anyone got a fix for this, removing the delay dont fix the problem for me. if anyone got he solution in my bio is my discord, maybe we could help each other out!

Achder commented 4 months ago

@Reiserro If you're still on v5 try my forked version: https://www.npmjs.com/package/@meerpohl/keyboard

I will soon provide a v6 fork.

Reiserro commented 4 months ago

@Achder thanks my G its working! Thumbs up hamster

mpmua commented 3 months ago

Issue still present in Capacitor 6, makes for a poor user experience on iOS devices.

sam-hu commented 3 months ago

Looking for a solution to this as well, in the meantime I found a workaround.

Capacitor is compatible with Cordova plugins. I installed https://github.com/cjpearson/cordova-plugin-keyboard and uninstalled @capacitor/keyboard, then put this JS line in my app startup:

window.Keyboard.shrinkView(true);

Now I don't have an issue with delayed resizing

Vasile-Peste commented 3 weeks ago

Is there any plan to address this issue?