Problem with focues input and scrolling

ionic-v1
1

Hello
i have problem: when i add simple input textfield into view, with border and placeholder and then when i enter to the field and try to scroll screen to top, it causes border disappering and field looks ugly.
I made a video with this problem: https://www.youtube.com/watch?v=Y0csZSHaei0

Same thing happens on android and iphone.

My source code is “ionic start myApp sidemenu” + modified template: search.html:

<ion-view title="Search">

<ion-nav-buttons side="left">
    <button menu-toggle="left"class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>

<ion-content class="has-header">
    <form>
    <div class="list">
        <input type="text" placeholder="some input..." style="border:1px solid black">
        </div>
    </form>
 </ion-content>

</ion-view>

Thanks in advice.

1 Like
2

Which ionic version do you use?

Could inspect your input after scrolling to top?

I had an issue if a footer-bar is on the page.
The Keyboard pop up and moves the footer above.
When scrolling the footerbar lays over the input field.

Greets, bengtler

3

I have beta6.
I run Chrome Mobile debugger and realised that during action there is cloned-input-text, which has no classes and styles which are assinged to original field. I think think is bug right?

4

I am also facing the same issue please provide the solution for this .Thanks :slight_smile:

5

This is caused by a function ionic.tap.cloneFocusedInput()
you may comment out calls to this function in ionic.bundle.js to prevent this from happening, however I think the function is there to prevent a cursor + scrolling visual bug.