如何去除Ionic侧边菜单首次打开时屏幕边缘的高亮边框线

问题描述 #

开发side="end"的Ionic侧边菜单时，通过绑定了点击事件的img元素调用menuController.open()方法首次打开菜单，屏幕所有边缘会出现异常高亮线。
问题效果截图：

初始实现代码 #

页面HTML代码 #

<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>

菜单唤起逻辑代码 #

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

问题定位 #

经排查，异常触发条件明确：直接在绑定点击事件的img元素上触发菜单打开操作，就会出现边框高亮问题。
问题触发代码片段：

<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>

当前临时规避方案：将触发点击的img元素包裹在背景透明的原生button元素内，把点击事件绑定到button上唤起菜单，可解决高亮问题，但不属于最优方案：

<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>

需要明确该问题的根本原因，以及Ionic官方推荐的规范解决方案。

根本原因 #

该高亮线是WebKit内核（移动端Chrome、iOS WebView）默认的焦点轮廓（outline）：

• <img>属于非可交互元素，框架和浏览器都没有对其做焦点样式重置
• 点击img触发菜单打开的瞬间，元素获得焦点，默认outline样式在侧边菜单的入场动画视口变换下被异常拉伸，最终呈现为全屏边缘的高亮线
• 套原生button能生效的核心原因是button是原生可交互元素，浏览器和Ionic都预设了button的焦点样式规则，不会出现轮廓拉伸的问题

规范解决方案 #

方案1（官方推荐） #

使用Ionic内置的ion-button组件替代原生button，设置fill="clear"实现无背景、无边框的透明按钮效果，组件内置了焦点样式重置、无障碍属性、点击反馈适配，不需要手动写样式重置，完全符合框架开发规范：

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

方案2（全局样式重置） #

如果不想修改元素结构，可以在全局样式文件global.scss中添加以下规则，重置img元素的默认焦点轮廓和点击高亮：

img {
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}

内容的提问来源于stack exchange，提问作者Àlex