Chrome 瀏覽器 v114 對 popover 元件的影響

Chrome 瀏覽器在 2023 年 5 月 30 日左右推出 v114 版本後，其中正式啟用 html 標準裡的 popover API ，也就是能在 html 標籤裡使用 popover 功能的相關屬性，呈現原生的 popover 效果。然而，前端 UI 套件和框架早已提供相同功能，但可能當時設計不佳，導致在 Chrome v114 後會無法呈現套件的 popover UI 元件，例如 ionic/react, ngx-bootstrap, auro-popover, ionic/vue, ionic/angular , …..等等。其他相關套件清單能夠在社群 HTML 標準討論串 on github 討論串 #9042 找到。

Chrome 在 6 月 1 日已經有人開 CR-bug ，反映 version 114 有這樣的問題，在 6 月 7 日得到肯定的回覆。

在 ionic v5+ 系列，可以用以下 workaround 方式暫時解決:

如果使用到 IonSelect

請在產品的全域範圍樣式檔案，例如: src/global.scss 檔案 (以 ionic framework 基礎開發)，或是 src/App.scss (以 create-react-app)，添加以下內容:

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

Notice: 單用上述也能一起解決 Android Chrome 上的顯示問題。解決方法來自 stackoverflow 討論串

如果直接使用 IonPopover

[popover].popover-viewport {
  display: initial;
  position: initial;
  margin: initial;
  border: initial;
  background: initial;
  padding: initial;
  width: initial;
  height: initial;
  overflow: initial;
  inset: initial;
  color: initial;
}

Notice: 單用上述不能一起解決 IonSelect 在 Android Chrome 上呈現的 popover 問題。解決方法來自 ionic GitHub 討論串 #27599 workaround

ionic v6 系列，已在 2023 年 2 月推出的 v6.5.2 解決這問題，點此觀看 stackoverflow , 點此觀看 github 。反映過程是在 ionic GitHub issue 討論串 #26643，解決是問題在 ionic GitHub issue 討論串 #26672。

ionic/angular v7 系列，有網友在 6 月 7 日於 ionic GitHub 討論串 #27599 for ionic/angular v7.0.10 反映在 v7.0.10 已解決，ionic/angular v7系列只要升級套件版本就好。

如果想看 `ngx-bootstrap` 套件的討論串，請到ngx-bootstrap issue 討論串 #6544

Ref. link: