Strange artifact under header navbar on Android devices

Ionic Framework ionic-v3
1

Maybe somebody had such artifact?

image
android.jpg1063×848 63.1 KB

after some transitions via side menu i have this small box
i don’t know what is this?

i tried to add such css:

.header-md::after {
  display: none !important;
}

but this isn’t working

on iOS everything is fine

i used default template with sidemenu

1 Like
2

Did you resolve this? I also see it in my projects started with the sidemenu template

3

no, left with this bug

4

I’m also having this problem :frowning:

5

Can you show us the html snippet of your page, and the Element tree at execution (selecting the pseudo: after)

6

I have yet to see a solution to this issue too.

7

image
ionic.png1359×645 68.1 KB

Above is the part where (:: after) appears,
Here is my html:

  <ion-card [ngClass]="colorStatus(item.status)" *ngFor="let item of schedules.today">
    <ion-item>
      <ion-avatar item-start>
        <img src="{{pathForImage(item.photo)}}">
      </ion-avatar>
      <h2 class="name">{{item.name}}</h2>
      <p>{{item.starttime | date:'shortTime'}} até {{item.endtime | date:'shortTime'}}</p>
    </ion-item>

    <ion-card-content>
      <h2>{{item.service}}</h2>
      <h3 *ngIf="item.status == 'A' || item.status == 'C'">{{item.price | currencyformat}} - {{item.status == 'A' ? "Agendado" : "Cancelado"}}</h3>
      <h3 *ngIf="item.status == 'F'">{{item.price | currencyformat}} - Finalizado</h3>
    </ion-card-content>

    <ion-row>
      <ion-col text-start>
        <button ion-button icon-left clear>
          <ion-toggle [(ngModel)]="item.finished" (ngModelChange)="valueChange(item)" [disabled]="item.status == 'F' ? true : false"></ion-toggle>
        </button>
      </ion-col>
      <ion-col text-end>
        <button ion-button icon-left clear [disabled]="item.status == 'F' ? true : false" (click)="openMenu(item, 'today')">
          <ion-icon name="ios-more"></ion-icon>
        </button>
      </ion-col>
    </ion-row>
  </ion-card>

</ion-list>

<ion-list *ngSwitchCase="'tomorrow'">

  <ion-card [ngClass]="colorStatus(item.status)" *ngFor="let item of schedules.tomorrow">
    <ion-item>
      <ion-avatar item-start>
        <img src="{{item.photo}}">
      </ion-avatar>
      <h2 class="name">{{item.name}}</h2>
      <p>{{item.starttime | date:'shortTime'}} até {{item.endtime | date:'shortTime'}}</p>
    </ion-item>

    <ion-card-content>
      <h2>{{item.service}}</h2>
      <h3 *ngIf="item.status == 'A' || item.status == 'C'">{{item.price | currencyformat}} - {{item.status == 'A' ? "Agendado" : "Cancelado"}}</h3>
      <h3 *ngIf="item.status == 'F'">{{item.price | currencyformat}} - Finalizado</h3>
    </ion-card-content>

    <ion-row>
      <ion-col text-start>
        <button ion-button icon-left clear>
          <ion-toggle [(ngModel)]="item.finished" (ngModelChange)="valueChange(item)" [disabled]="item.status == 'F' ? true : false"></ion-toggle>
        </button>
      </ion-col>
      <ion-col text-end>
        <button ion-button icon-left clear [disabled]="item.status == 'F' ? true : false" (click)="openMenu(item, 'tomorrow')">
          <ion-icon name="ios-more"></ion-icon>
        </button>
      </ion-col>
    </ion-row>
  </ion-card>

</ion-list>