[iOS] Webview jumps up and down when keyboard is about to show

[solojuve1897]

Description of the problem: In connection to the implemented fix solving the known iOS12-bug (https://github.com/ionic-team/capacitor/issues/814) I encountered some issue which I recorded and uploaded:

https://drive.google.com/file/d/11Msg2lSiW1UoN-si6nL1QxLS93shBu9h/view

@jcesarmobile I wanted to ask what changes you've made to solve the iOS12-bug. The reason I ask is because I was planning on putting all my energy the coming days on trying to solve these issues and I believe they are connected to the fix which was implemented.

Affected platform

• [ ] Android
• [x] iOS
• [ ] electron
• [ ] web

OS of the development machine

• [ ] Windows
• [x] macOS
• [ ] linux

Capacitor version: Beta. 19

Steps to reproduce:

• Create a page with enough content to scroll on your device. Add an input-field in the middle and tap on it. The webview should jump up and down like it is shown in the clip.

• Check the clip to see how to reproduce the bug where the input cursor belonging to the input-field follows the scrolling downwards and upwards.

[jcesarmobile]

I can't reproduce the first problem, can you provide a sample app?

And for the second one I get the opposite behaviour, the field moves while the cursor remains fixed (which is also bad), not sure if related to your field being fixed.

[solojuve1897]

@jcesarmobile

Check this repo out: https://github.com/solojuve1897/capacitor-webview-jump

Tested on an iPhone 6s. As long as the content is scrolled to the top it will jump, every time.

With regards to the cursor issue: I don't know why I wasn't able to reproduce it in a consistent fashion. I saw it happen to me only once with this test-app. With my production-app (in iOS, never on Android) it happens every time as shown in the clip. Maybe it's connected to some css properties.

Maybe also important to mention that the viewport is set to the following:

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">

[MatthewPringle]

With regards to the cursor issue this happens in mobile Safari and has been a 'feature' in iOS for as long as I can remember.

I used to change the colour of the cursor on focus so it would then show, but from memory that stopped working in a recent iOS version.

[joshoconnor89]

why has this issue not been solved? im getting this exact issue. this is a deal breaker for a lot of people using capacitor

[joshoconnor89]

i figured it out, you have to use the setScroll property here https://capacitor.ionicframework.com/docs/apis/keyboard/

setScroll setScroll(options: { isDisabled: boolean }): Promise<void> Programmatically enable or disable the WebView scroll

[joshoconnor89]

i know this is the issue, becuase if I add

dispatch_async(dispatch_get_main_queue(), ^{ self.webView.scrollView.scrollEnabled = NO; self.webView.scrollView.delegate = self; }); to Keyboard.m - (void)load and I remove the disable scroll method:

theres no more weird bouncing and completely broken UX. Please update your documentation to highlight the importance of this setScroll property and how it may cause things to seriously break

[imt-s1897]

@joshoconnor89

So, would setting IsDisabled to true for the web view scroll be enough to solve the issue? Is it that what you are saying? I don't even remember if I just let it be or if I fixed it in some hacky fashion. Old issue.

[joshoconnor89]

yep it solved my issue. and if you need anything that needs to be scrolled, just create a div and set overflow-y: auto and -webkit-overflow-scroll: touch to that div's class.

[joshoconnor89]

import { Plugins } from '@capacitor/core'; const { Keyboard } = Plugins;

Keyboard.setScroll({ isDisabled: true })

[imt-s1897]

Cool, will try it out!

[jwilson114]

Anyone else still having this issue?

[rdlabo]

I had the same problem today(of cause capacitor@3).

Keyboard.setScroll help me!

[Timileyin105]

please any solution on how to do this android ? , the view shrink when keyboard shows up i need it to scroll instead