Big problem with keyboard and viewport


#1

Hi community.
First of all, I have a problem with one of my apps, and even is not made with ionic (because i started before knowing of the existence of ionic), i come here to ask for a solution because of the great community you have here.

The problem is with keyboards and is adressed as a bug by apple, causing the rejection of my app on the app store.

My app is cordova 3.5, and i’ve tried to use both this plugin https://github.com/driftyco/ionic-plugins-keyboard and https://github.com/apache/cordova-plugins/tree/master/keyboard using the methods close() setting <preference name="KeyboardShrinksView" value="true and false" /> in config.xml

(You can see the bugs on live with a real iphone iOS 7.1 with safari in https://wineity.com/pg)

In all of my forms where i have a submit button, if I write something on the input field, and press the HTML submit button on the view, the keyboard hides and the form is submit, but the uiwebview or the viewport or whathever gets shrinked and remains like that. (see screenshot)

I’ve noticed that if you rotate the device and rotate again to vertical mode, the viewport returns to its original state.
I’ve tried diferent meta viewport tags, i’ve tried to delete the input in angular so the keyboard hides itself, and i’ve even set a javascript to force a scroll on form submit. Nothing has worked.

Its curious that if you submit the form via the “go” button on the keyboard, the webview has no problems. This only happens when the “IR” button is pressed.

Any help, please?
Thanks in advance. And I swear you that my next app will be made in ionic.


#2

Unfortunately I couldn’t reproduce this with mobile safari.

But this is a common issue with hybrid apps, so a few things could happened.

Whats’ your viewport metatag look like?

Our keyboard plugin has been modified to work with our scroll view and css so it may not work with non-ionic projects.
See this issue on github.

So tl;dr
I’m not sure what we can do over here if the project isn’t made with ionic. Maybe check out Stackoverflow?


#3

Sorry, Working on the issue i see that i’ve not described well how to reproduce the bug.
Could you please do the following steps?

UPDATE: Don’t do it right now because i’m working on it and looks like that i’ve found something, and also you won’t be able to reproduce the bug

  1. Enter in https://wineity.com/pg
  2. Click in the center button (a square with a up arrow) and select “Add to home screen”
  3. Enter to the new created shortcut
  4. Write something on the input and click the button “IR4”

The bug is reproduced on real devices and even on my xCode iOS emulator.
If you could at least give me a hint of what is this bug (some meta viewport, some CSS attribute, some helpful javascript… etc)

Thanks


#4

Hey @Bonda, whats your metaviewport? I kind of got the issue you were describing, but it was able to fix itself after a second.

Try this one out.

<meta name="viewport" content="initial-scale=1, user-scalable=no">

#5

Check the plugin version is most recent too… the one on PhoneGap Build for example is a bit out of date (and is being updated currently)