Content flickering and moving up when keyboard opens and form is out of viewport


#1

I’m experiencing a bug where the content is pushed up momentarily when the keyboard is opened and the relevant form is out of the viewport (I’d like to animate it into view, but let’s just forget about that part for now). Here’s a link to a screen cast of the bug (not even trying to animate the form in yet, so it remains out of view). When the viewport isn’t transformed out of view, the bug doesn’t happen. Also, the bug still happens even if the form is out of viewport with bottom: -200px for example. Calling cordova.plugins.Keyboard.disableScroll(true) doesn’t fix the bug.

And here’s the code:

<ion-modal-view class="mysignupin" id="signupinmodal">

 <ion-content scroll="false">

<section class="padding messagingwrap">
  
  <i class="ion-ios-close-empty white close-signin" ng-click="closeModal(1)"></i>

  <div id="logowrap" class="logowrap">
    <img class="logo" src="source">
  </div>

  <div class="signin-wrap">
    <img src="source"> 
    <div class="signin-overlay"></div>
    <h4 class="signin-wrap-h4">Send amazing gifts, instantly.</h4>
    <article class="signin-buttons-wrap row">
      <div show-login class="signinbutton col button">Sign In</div> 
      <div show-sign-up class="signinbutton col button">Sign Up</div>
    </article>
  </div>

</section>


  <!-- HIDDEN SIGN IN FORM -->

  <form name="signinform" id="signinform" novalidate>
     <i ng-show="pwfocus" send-password-reset class="forgot-password-button">Forgot Password?</i>
    <label class="input-wrap">
      <input name="emailname" id="signinemail" ng-model="email" class="item item-input" placeholder="Email Address" type="email">
  </label>

  <label class="input-wrap ion-ios-arrow-thin-right" id="passwordlabel" ng-show="signinform.emailname.$viewValue.length">
      <input show-next-login-input ng-focus="pwfocus = true" ng-blur="pwfocus = false"  name="passwordname" id="signinpassword" ng-model="password" class="item item-input" placeholder="Password" type="password">
   </label>
    <button class="inline-button" ng-click="logIn()" ng-show="password.length">Login</button>
  </form>


  </ion-content>

</ion-modal-view>

The JS is just a simple directive that calls

$timeout(function() {
    firstinput.focus();
 });

on the button click (where firstinput is the first input in the form). Obviously I’d like to transform the form into view eventually as well, but first thing’s first.

Any thoughts or ideas would be much appreciated – it’s such a frustrating little bug!