Possible bug in ion-content

ionic-v1
1

Hi, could you please help me with something that I’m sitting over almost whole day? I’ve finally figured out that if header + subheader are together for example 128px heightm the ion-content doesn’t allow to edit anything in inputs located at the top of ion-content. Example code:

<ion-header-bar>
   <button class="button button-icon ion-ios7-settings"></button>
   <button class="button button-icon ion-ios7-close-outline"></button>
</ion-header-bar>

<ion-header-bar class="bar-subheader" >
   <h1 class="title">App</h1>
</ion-header-bar>
		
<ion-content>
   <div class="list card ">
      <input type="tel" >
   </div>
</ion-content>

and the size of the headers must be big enough:

bar-header {
   height: 56px;
   padding: 0px;
}
.bar-subheader {
   top: 56px;
   height: 72px;
   padding: 0px;
}
.has-header {
   top: 56px;
}
.has-subheader {
   top: 128px;
}

In this case it is impossible to input anything to the input. It is constantly cleared out. The problem is not reproducable on a desktop Chrome. I’ve noticed it on Android 4.0.4 and 4.0.3. On 4.2.2 everything works correctly. It doesn’t matter if the type of the input is tel or text. If I touch screen keyboard trying to enter anything to the field, the screen flickers and input is cleared out.

I have no idea how to make this work correctly, please help…

2

By trail and error I’ve found the limit for the feature to work or not is 115px. If I set the header+subheader height + has-header + has-subheader height to anything above 115px, input doesn’t work. Below (e.g. 114px) input works. This is so annoying. Please try to fix this in future version.