I’m having an annoying glitch with text inputs in forms when running my app in an iphone or in the ios emulator (not happening in a browser). Next are my forms and the custom styles I have:
<ion-content id="home">
<form>
<label class="item-input">
<input type="text" class="rounded" placeholder="What do you need?">
</label>
<label class="item-input">
<input type="text" class="rounded" placeholder="Enter an address...">
</label>
<div align="right">
<button class="btn" ng-click="search()" >Search</button>
</div>
</form>
</ion-content>
input.rounded {
border: 1px solid #ccc !important;
-moz-border-radius: 15px !important;
-webkit-border-radius: 15px !important;
border-radius: 15px !important;
padding: 8px 5px 4px 5px !important;
outline: 0 !important;
-webkit-appearance: none !important;
background-color: #fff !important;
text-align: center !important;
color: #489BEF !important;
}
input.rounded:focus {
border: 1px solid lightblue !important;
}
When it’s static it is shown ok:
When I focus an input and then scroll, this is what happens:
Essentially, it forgets my custom css styles.
I appreciate your help! Ionic is awesome!