Chrome 114中Ionic ion-select的popover界面无法打开问题求助

问题根源 #

Chrome 114正式启用了原生Popover API，其中包含一条默认CSS规则：

[popover]:not(:popover-open):not(dialog[open]) {
    display: none;
}

而Ionic 6.1.0及更早版本的ion-select在使用interface="popover"时，会给弹出的ion-popover元素添加原生popover属性，导致这条规则直接将未激活的popover隐藏，点击后无法正常显示。

解决方案 #

1. 升级Ionic框架（推荐） #

Ionic团队已经在6.3.0及后续版本中修复了该冲突——将原生popover属性替换为data-popover，避免和浏览器API冲突。执行以下命令升级（注意匹配你的Angular版本，Angular 12可兼容Ionic 6.3.x系列）：

npm install @ionic/angular@6.3.x

2. 临时CSS覆盖 #

如果暂时无法升级框架，可在全局样式文件（比如global.scss）中添加以下规则，强制显示Ionic的popover元素：

ion-popover[popover]:not(:popover-open):not(dialog[open]) {
  display: block !important;
}

该规则仅针对Ionic的ion-popover元素，不会影响原生Popover API的使用。

3. 临时替换交互接口 #

作为应急方案，可以将ion-select的interface临时改为action-sheet或alert，绕过popover冲突：

<ion-select interface="action-sheet" placeholder="Select fruit">
  <!-- 选项内容不变 -->
</ion-select>

内容的提问来源于stack exchange，提问作者Jefferk Yacelga