[Solved] ion-select popover not working Chrome 114 – Google-chrome

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

The Solutions:

Solution 1: Disable the `display: none` property

In **global.css**, add the following code to disable the `display: none` property that is causing the popper to not open:

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

Solution 2: Update to Ionic Framework v6.5.2 or Later

The issue with the ion-select popover not working in Chrome 114 is due to a bug in the Ionic Framework. This bug has been fixed in version 6.5.2 of the Ionic Framework. To resolve the issue, update your Ionic Framework to version 6.5.2 or later. This will ensure that the ion-select popover works as expected in Chrome 114.

Solution 3: CSS Tweak

The ion-popover popover is not opening in Chrome 114 due to the introduction of the popover property. To resolve this issue, add the following CSS rule to your global.scss file:

ion-popover .popover-viewport {
    display: contents;
}

Caution: This solution may have unintended consequences, so use it with discretion.

Solution 4: CSS Override

Add the following CSS override to your project to fix the issue:

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

This override will ensure that the popover is displayed when the ion-select is opened.