Problem on header input on ios

Hi all, I need some help.

My application has a fixed input in the main header and it works fine on Android (for all the kinds of screen dimensions) and Windows Phone, but it has some distortions on iOS (as shown in the following picture).

The expected behaviour would be (Android):

As you can see, the header input on iOS has some problems: it overlaps another button and the input field (“Buscar”) is distorted.

My code for the header bar is:

<ion-nav-bar class="main-bar" style="width:100%; position: relative;">
        <div style="width:9%;">
            <button id="lateralbutton" class="button button-icon button-clear ion-navicon menu-icon" ng-click="lateralMenu()" style="padding: 1% 1% 20% 25%;"></button>
        <div class="ppform" style="position: relative; width: 91%;">
            <form ng-submit="makeSearch()" style="width: 100%; height: 100% !important; position: absolute;">
                <div class="bar bar-header item-input-inset menu-input">
                    <div class="item-input-wrapper" style="height: 100%;">
                        <i ng-click="makeSearch()" class="icon ion-android-search menu-icon" style="width:4%"></i>
                        <input type="text" placeholder="Buscar" ng-model="searchMenu.searchContent" style="width: 90%;">
                        <i ng-show="searchMenu.searchContent.length" style="width: 6%;" ng-click="clearSearch()" class="clear-search icon ion-close-round"></i>

Can anyone help me with this issue?
Thanks a lot in advance.

Hi @rcnm,
I didnt compare your snippet with this example but maybe it helps,
Take a look at this codepen with input in header bar

I’ve tried the codepen, but unfortunately it didn’t work.
The header input is still distorted.
Thanks for your quick reply.