Ionic Menu remove highlight line

Question

Community, I was coding a side menu at the slot end and when I open the menu for the first time by using an image and menu controller to open it appears a highlight line on all the screen borders. Does anyone know how to get rid of it?

The HTML code for the page I have right now:

  <ion-menu side="end" menuId="end" contentId="main2" class="ion-no-border">
  <ion-header>
    <ion-toolbar>
      <ion-segment value="powerups" (ionChange)="segmentChanged($event)">
        <ion-segment-button value="powerups">
          <ion-icon src="/assets/svg/fire.svg"></ion-icon>
          <ion-label>{{ "powerups" | translate }}</ion-label>
        </ion-segment-button>
        <ion-segment-button value="upgrades">
          <ion-icon src="/assets/svg/rocket.svg"></ion-icon>
          <ion-label>{{ "upgrades" | translate }}</ion-label>
        </ion-segment-button>
      </ion-segment>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list *ngIf="selectedSegment == 'powerups'">
      <ion-item *ngIf="autoClick == 0" style="opacity: 0.3;" (click)="buyAutoClick()">
        <img src="/assets/svg/pointing-hand.svg" height="40" width="40" />
        <ion-grid>
          <ion-row>
            <ion-col size="6">
              <ion-label>{{ "autoclick" | translate }}</ion-label>
            </ion-col>
            <ion-col size="6">{{ "level" | translate }} {{ autoClick + 1 }}</ion-col>
          </ion-row>
          <ion-row>
            <ion-col size="6">{{ autoClickPrice | number : '1.0-0' }}</ion-col>
            <ion-col size="6">{{ "cps" | translate }} 0.1</ion-col>
          </ion-row>
        </ion-grid>
      </ion-item>
      <ion-item *ngIf="autoClick != 0" (click)="buyAutoClick()">
        <img src="/assets/svg/pointing-hand.svg" height="40" width="40" />
        <ion-grid>
          <ion-row>
            <ion-col size="6">
              <ion-label>{{ "autoclick" | translate }}</ion-label>
            </ion-col>
            <ion-col size="6">{{ "level" | translate }} {{ autoClick + 1 }}</ion-col>
          </ion-row>
          <ion-row>
            <ion-col size="6">{{ autoClickPrice | number : '1.0-0' }}</ion-col>
            <ion-col size="6">{{ "cps" | translate }} 0.1</ion-col>
          </ion-row>
        </ion-grid>
      </ion-item>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
    </ion-list>
    <ion-list *ngIf="selectedSegment == 'upgrades'">
      <ion-item>
        <ion-label>Label</ion-label>
      </ion-item>
    </ion-list>
  </ion-content>
  <ion-router-outlet id="main2"></ion-router-outlet>
</ion-menu>
<ion-content>
</ion-content>
<ion-footer class="ion-padding ion-no-border" collapse="fade">
  <ion-grid style="padding-bottom: 15%;">
    <ion-row>
      <ion-col size="6">
        <img #settings src="/assets/svg/settings.svg" style="width : 60px ; height : 
        60px;" (click)="openSettings()">
      </ion-col>
      <ion-col size="6" class="ion-text-right">
        <img #shop src="/assets/svg/sushi-shop.svg" style="width : 60px ; height : 
        60px;" (click)="openShop()">
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-footer>

The typescript methods called and used in order to open the end menu:

  openShop() {
    this.menuController.open('end');
  }

UPDATE:The problem was by using an image with a click event and you use it to open a menu it does this border.

<ion-col size="6">
   <img #settings src="/assets/svg/settings.svg" style="width:60px;height:60px;" (click)="openSettings()">
</ion-col>
<ion-col size="6" class="ion-text-right">
   <img #shop src="/assets/svg/sushi-shop.svg" style="width:60px;height:60px;" (click)="openShop()">
</ion-col>

My possible work around (probably not the best in anyway but for me works):

<ion-col size="6">
   <button style="background-color: transparent;" (click)="openSettings()">
      <img src="/assets/svg/settings.svg" style="height: 60px; width:60px;">
   </button>
  </ion-col>
  <ion-col size="6" class="ion-text-right">
   <button style="background-color: transparent;" (click)="openShop()">
      <img src="/assets/svg/sushi-shop.svg" style="height: 60px; width:60px;">
   </button>
</ion-col>

Answer 1

This is a CSS issue, you should inspect the your ion-menu item or the body HTML element and check if there is any border attribute.

Or just post your CSS here please

Answer 2

I had similar issue, still do not know the reason of the boarder appearing around the menu component but adding following style to the 'global.scss' file helped me to get rid of the menu border.

ion-menu {
  outline-style: none !important;
}