Ios 12 keyboard scroll issue

#1

Hi,

I have a page filled with text fields. Some of them are dynamic. Whenever I tap on a text field or programmatically bring the focus to a field, the keyboard opens up and the text field on focus scrolls above the keyboard. All of this is working in other versions of ios except ios12.

In ios 12, when the keyboard closes, the UI looks fine but on inspecting the ui in xcode, the html element and its child ion-app takes only a fraction of the screen (space other than the portion occupied by keyboard when it was open). The elements are seen in right position but the events bound to them dont work when you tap on them but works when you tap a few inches above(position where they would be when the keyboard is open).

The following image is the html element inspected from xcode before opening the keyboard.

The following is the same element inspected after closing the keyboard

This issue does not happen when I set keyboard.disableScroll(true). But then, the keyboard scrolls above the inputs and hides them. That is also not desirable.

Also, I have set in config.xml. So the screen doesn’t actually resize when the keyboard pops up.

Any help here is greatly appreciated. Please find my environment info below.

cli packages: (/node/v8.10.0/lib/node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 8.0.0 

local packages:

@ionic/app-scripts : 3.1.8
Cordova Platforms  : android 7.0.0 ios 4.5.5
Ionic Framework    : ionic-angular 3.9.2

System:

Node  : v8.10.0
npm   : 5.6.0 
OS    : macOS
Xcode : Xcode 10.0 Build version 10A255
2 Likes
IOS Keyboard shifs all clickevents away from their buttons
#2

Same issue here. Is there any feedback for ragv2k7

#3

Same issue here guys…I have some click listener that don’t get fired after closing the keyboard. If I tap inside the after some tabs it gain again full height and everything start again…

#4

I am seeing the same issue, when using keyboard arrows to scroll through the input fields and then closing the keyboard the buttons in my toolbar cannot be clicked. When you press them nothing happens.
This issue is consistently reproducible and makes the app unusable :frowning:

This is NOT happening in iOS 11

Interesting I also see this in the Xcode logs

**Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.**

**The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKitCore/UIView.h> may also be helpful.**

**2018-09-27 19:23:09.665225+0100 App[11406:2676692] [LayoutConstraints] Unable to simultaneously satisfy constraints.**

**Probably at least one of the constraints in the following list is one you don't want.** 

**Try this:** 

**(1) look at each constraint and try to figure out which you don't expect;** 

**(2) find the code that added the unwanted constraint or constraints and fix it.** 

**(Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints)** 

**(**

**"<NSAutoresizingMaskLayoutConstraint:0x283898e10 h=-&- v=-&- _UIToolbarContentView:0x103b1d770.width == UIToolbar:0x103b1d330.width (active)>",**

**"<NSLayoutConstraint:0x28388df90 H:|-(0)-[_UIButtonBarStackView:0x103b16ca0] (active, names: '|':_UIToolbarContentView:0x103b1d770 )>",**

**"<NSLayoutConstraint:0x28388dfe0 _UIButtonBarStackView:0x103b16ca0.trailing == _UIToolbarContentView:0x103b1d770.trailing (active)>",**

**"<NSLayoutConstraint:0x283887e80 H:|-(8)-[_UIModernBarButton:0x103d54d70'Done'] (active, names: '|':_UIButtonBarButton:0x103d541e0 )>",**

**"<NSLayoutConstraint:0x283887ed0 H:[_UIModernBarButton:0x103d54d70'Done']-(16)-| (active, names: '|':_UIButtonBarButton:0x103d541e0 )>",**

**"<NSLayoutConstraint:0x283898230 'UISV-canvas-connection' UILayoutGuide:0x2822c8000'UIViewLayoutMarginsGuide'.leading == _UIButtonBarButton:0x103d514b0.leading (active)>",**

**"<NSLayoutConstraint:0x283898410 'UISV-canvas-connection' UILayoutGuide:0x2822c8000'UIViewLayoutMarginsGuide'.trailing == _UIButtonBarButton:0x103d541e0.trailing (active)>",**

**"<NSLayoutConstraint:0x283898460 'UISV-spacing' H:[_UIButtonBarButton:0x103d514b0]-(0)-[UIView:0x103d53490] (active)>",**

**"<NSLayoutConstraint:0x2838984b0 'UISV-spacing' H:[UIView:0x103d53490]-(0)-[_UIButtonBarButton:0x103d53670] (active)>",**

**"<NSLayoutConstraint:0x283898500 'UISV-spacing' H:[_UIButtonBarButton:0x103d53670]-(0)-[UIView:0x103d54000] (active)>",**

**"<NSLayoutConstraint:0x283898550 'UISV-spacing' H:[UIView:0x103d54000]-(0)-[_UIButtonBarButton:0x103d541e0] (active)>",**

**"<NSLayoutConstraint:0x283898fa0 'UIView-Encapsulated-Layout-Width' UIToolbar:0x103b1d330.width == 0 (active)>",**

**"<NSLayoutConstraint:0x28388de50 'UIView-leftMargin-guide-constraint' H:|-(0)-[UILayoutGuide:0x2822c8000'UIViewLayoutMarginsGuide'](LTR) (active, names: '|':_UIButtonBarStackView:0x103b16ca0 )>",**

**"<NSLayoutConstraint:0x28388dea0 'UIView-rightMargin-guide-constraint' H:[UILayoutGuide:0x2822c8000'UIViewLayoutMarginsGuide']-(0)-|(LTR) (active, names: '|':_UIButtonBarStackView:0x103b16ca0 )>"**

**)**

**Will attempt to recover by breaking constraint** 

**<NSLayoutConstraint:0x283887ed0 H:[_UIModernBarButton:0x103d54d70'Done']-(16)-| (active, names: '|':_UIButtonBarButton:0x103d541e0 )>**
1 Like
#5

Try removing ionic-plugin-keyboard and installing cordova-plugin-ionic-keyboard.

1 Like
#6

I am using capacitor, so am not actually using any Cordova plugins directly and still getting this issue.

#7

@ragv2k7 @venomtl Suggested solution does work.

By removing the old deprecated keyboard and installing the new cordova-plugin-ionic-keyboard the content no longer shifts like the original image.

Only problem is that there are issues with the overlapping of inputs and the keyboard now.

Mainly on IOS, but selecting the inputs will try to scroll them into view, but if you select inputs closer to the bottom of the page the keyboard overlaps, and this is made worse if you have an ion-footer that gets docked to the bottom too.

#8

@Lordsteggu This is where I am now too… Using the new keyboard plugin (which feels half baked) I am able to get to an acceptable level of functionality except for fields being covered by the keyboard on iOS.

#9

It was initially messing up on both ios and android.

But i added in the config to stop scrollAssist, this worked for android.
But for ios it seems to not make a bit of difference.

IonicModule.forRoot(MyApp, {
animate: true,
animation: ‘md-transition’,
platforms: {
ios: {
scrollAssist: false,
autoFocusAssist: false,
},
android: {
scrollAssist: false,
autoFocusAssist: false,
}
},
}),

So the above fixed my android issues, with the new keyboard there is no keyboard.disableScroll(), not sure how much difference this made as I haven’t personally used that before on the old keyboard.

1 Like
#10

The following steps solved my issue. I am continuing to use ionic-plugin-keyboard (2.2.1)

  1. I first removed plugins and platforms.
  2. Updated cordova-plugin-ionic-webview to 2.1.4
  3. Added platforms

In the code I have set keyboard.disableScroll(false)
and in app.module.ts, in Imports

IonicModule.forRoot(MyApp, {
platforms: {
ios: {
statusbarPadding: true,
scrollAssist: true,
autoFocusAssist: true,
scrollPadding: true
}
}
}),

Not sure if it makes any sense but it works well for me. The keyboard doesn’t hide the inputs either.

2 Likes
#11

Any new informations about this bug?
Current workaround is to build iOS app with xCode 9, that will work. But sooner or later Apple will reject apps uploaded via xCode 9, so this is only teporary. Also it makes great struggle while testing app on iOS 12 devices, since you need to switch between 2 xCode versions over and over.

#12

I have the same problem. :frowning:

#13

I had the same issue, here’s my solution:

On the app.component.ts, inside the constructor, every time the keyboard shows set the height as auto for the html tag. When the keyboard hides set the height as 101vh and this will make the app to readjust the heigh, the scroll problem will disappear.

import {Renderer2} from '@angular/core';

let html = document.getElementsByTagName('html').item(0);

this.keyboard.onKeyboardHide().subscribe(() => {
    this.renderer2.setStyle(html, 'height','101vh')
});

this.keyboard.onKeyboardShow().subscribe(() => {
    this.renderer2.setStyle(html, 'height','auto')
});
2 Likes
#14

was looking to implement this but onKeyboardX is not a know method. Thats using the ionic keyboard, are you using this with the cordova one?

thanks

#15

Looks like its a Cordova issue, You can find more on this link: Git issue link

#16

Damn, it worked!! You are a life saver!!! I’ve spent f****g 3 days on this!
Thank you!

1 Like
#17

i do like this. old style. ionic web app

	let html = document.getElementsByTagName("html")[0];
	window.addEventListener('native.keyboardshow', (e) => {
		console.log("show2");
		html.style.height = "auto";
		//this.renderer2.setStyle(html, 'height', '101vh');
	}); 
	window.addEventListener('native.keyboardhide', () => {
		console.log("hide2");
		html.style.height = "101vh";
		//this.renderer2.setStyle(html, 'height', 'auto');
	});