Ionic 5 Popover箭头在Android平台被ion-overlay遮挡的问题求助

各位大佬好，我现在用Ionic 5开发，想在Android平台上实现和iOS风格一致的Popover，但遇到了个头疼的问题：当Popover弹出时，它的箭头被ion-overlay挡住了，看得特别不清楚。我试着在浏览器调试工具里把popover-arrow类的z-index改成12之后，箭头就正常显示出来了，下面是我的相关代码，想请教下怎么在项目里正确配置解决这个问题？

Ts文件代码 #

async presentExpirationPopOver(event: any) {
    this.popover = await this.popoverCtrl.create({
      component: PopoverComponent,
      event,
      mode: 'ios',
      cssClass: 'custom-pop-over',
      showBackdrop:false,
      arrow:true,
    });
    await this.popover.present();
}

SCSS代码（全局样式文件） #

.custom-pop-over {
  --min-width: 240px;
  --max-width: 260px;
  --border-radius: 6px;
  --border: 1px solid #d0d2d3;
  --padding: 5px;
  --box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);  

  .popover-wrapper{
    // 原代码未写完，主要问题集中在箭头的层级
  }
}

已验证的临时解决方法 #

我在浏览器调试时手动修改popover-arrow的z-index为12后，箭头就能正常显示在最上层不被遮挡，但不知道怎么把这个样式固化到项目里。比如是不是需要在自定义的Popover样式里明确给箭头设置更高的z-index？

备注：内容来源于stack exchange，提问作者Kaushal Digraskar