Ionic3 ion-navbar searchbar afterimage issue

Ionic Framework ionic-v3
1

I have a page call “B” with a searchbar in the ion-navbar, when B page back to page A pressing the back button, searchbar will have a afterimage in the page A ion-navbar in 1 second and then disappear. Anyone know what is the problem, and how to solve?

<ion-header no-border>
  <ion-navbar>
    <ion-searchbar>
    </ion-searchbar>
  </ion-navbar>
</ion-header>
2

Try:

<ion-header no-border>
  <ion-searchbar>
  </ion-searchbar>
</ion-header>

Or:

<ion-header no-border>
  <ion-navbar>
  </ion-navbar>
  <ion-searchbar>
  </ion-searchbar>
</ion-header>

For example:

<ion-header>

  <ion-searchbar id="searchbar" placeholder="City, state or postcode" (ionInput)="getItems($event)"></ion-searchbar>

  <ion-toolbar no-border-top>
    <ion-segment color="primary" [(ngModel)]="location">
      <ion-segment-button value="venues">
        <strong>Venues</strong>
      </ion-segment-button>
      <ion-segment-button value="breweries">
        <strong>Breweries</strong>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>

</ion-header>

<ion-content no-bounce>

  <div #map class="map-container"></div>

</ion-content>

image
image.jpg1080×1920 478 KB

See: https://ionicframework.com/docs/api/components/searchbar/Searchbar/

3

thanks for your reply.But if no navbar then it will no back button, and if searchbar outside the navbar, it will line break to a new line.