IOS: wrong scroll behavior with subheader and keyboard

ionic-v1
1

Hey there,

I have a very odd issue with subheader and keyboard on iOS.

As you can see on the video: An input field and two text areas are visible, the input field has focus.
When I click into the text are, a scroll is performed so that the focused fields are scrolled out of the window.

My setup:
Cordova 5.4.1
Ionic 1.2.4

How to reproduce it? Very easy:

  1. Take the tabs starter project
  2. Throw out the navbar
  3. Add content to tab-view: ion-view with two ion-header-bars and ion-content (which contains an ion-list with ion-items)

In my case:
> 

        <ion-header-bar align-title="center" class="bar-energized">
          <button class="button button-small button-clear button-assertive">
            <span>Zurück</span>
          </button>
          <h1 class="title">Header Chats</h1>
          <button
            class="button button-small button-clear button-royal" type="submit">
            <span>Speichern</span>
          </button>
        </ion-header-bar>
        <ion-header-bar align-title="center" class="bar-positive bar-subheader">
          <button class="button button-small button-clear button-assertive">
            <span>Test</span>
          </button>
          <h1 class="title" >Subheader Chats</h1>
          <button
            class="button button-small button-clear button-royal" type="submit">
            <span>Test2</span>
          </button>
        </ion-header-bar>
        <ion-content class="padding has-subheader">
          <ion-list can-swipe="true">
            <ion-item class="item item-input item-stacked-label">
              <span class="input-label">Input Label</span>
              <input name="1" type="text" placeholder="" ng-required="true">
            </ion-item>
            <ion-item class="item item-input item-stacked-label">
              <span class="input-label">Area Label</span>
              <textarea rows="5"></textarea>
            </ion-item>
            <ion-item class="item item-input item-stacked-label">
              <span class="input-label">Area Label</span>
              <textarea rows="5"></textarea>
            </ion-item>
            <ion-item class="item item-input item-stacked-label">
              <span class="input-label">Input Label</span>
              <input name="1" type="text" placeholder="" ng-required="true">
            </ion-item>
            <ion-item class="item item-input item-stacked-label">
              <span class="input-label">Input Label</span>
              <input name="1" type="text" placeholder="" ng-required="true">
            </ion-item>
            <ion-item class="item item-input item-stacked-label">
              <span class="input-label">Area Label</span>
              <textarea rows="5"></textarea>
            </ion-item>
            <ion-item class="item item-input item-stacked-label">
              <span class="input-label">Area Label</span>
              <textarea rows="5"></textarea>
            </ion-item>
            <ion-item class="item item-input item-stacked-label">
              <span class="input-label">Input Label</span>
              <input name="1" type="text" placeholder="" ng-required="true">
            </ion-item>
          </ion-list>
        </ion-content>
      </ion-view>
2

I’ve just made some debugging in the scrollChildIntoView function of scrollView.js:

when calling self.scrollBy(0, scrollTop, true); (line 743, scrollView.js)
scrollTop has a value of 100-120, which is ok, but the scrollBy line is called twice, when alreadyShrunk is true.
This leads to a total scroll distance of ~200-250 and the element is becoming invisible.

When alreadyShrunk is false, the requestAnimationFrame (line 689) code is called twice, but scrollBy (line 743) just once, which leads to a proper scroll behavior.

Any ideas here?