diff --git a/core/src/components/modal/modal.scss b/core/src/components/modal/modal.scss
index 80f92847742..8a7b291cac1 100644
--- a/core/src/components/modal/modal.scss
+++ b/core/src/components/modal/modal.scss
@@ -48,13 +48,6 @@
   outline: none;
 
   contain: strict;
-
-  pointer-events: none;
-}
-
-:host(.modal-interactive) .modal-wrapper,
-:host(.modal-interactive) ion-backdrop {
-  pointer-events: auto;
 }
 
 :host(.overlay-hidden) {
diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
index c1e1a996c5a..1d2b1736c25 100644
--- a/core/src/components/modal/modal.tsx
+++ b/core/src/components/modal/modal.tsx
@@ -587,7 +587,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
 
     const showHandle = handle !== false && isSheetModal;
     const mode = getIonMode(this);
-    const { presented, modalId } = this;
+    const { modalId } = this;
     const isCardModal = presentingElement !== undefined && mode === 'ios';
 
     return (
@@ -605,7 +605,6 @@ export class Modal implements ComponentInterface, OverlayInterface {
           [`modal-card`]: isCardModal,
           [`modal-sheet`]: isSheetModal,
           'overlay-hidden': true,
-          'modal-interactive': presented,
           ...getClassMap(this.cssClass)
         }}
         id={modalId}
diff --git a/core/src/components/popover/popover.scss b/core/src/components/popover/popover.scss
index eff12f2c505..da67813ad70 100644
--- a/core/src/components/popover/popover.scss
+++ b/core/src/components/popover/popover.scss
@@ -42,13 +42,6 @@
   color: $popover-text-color;
 
   z-index: $z-index-overlay;
-
-  pointer-events: none;
-}
-
-:host(.popover-interactive) .popover-content,
-:host(.popover-interactive) ion-backdrop {
-  pointer-events: auto;
 }
 
 :host(.overlay-hidden) {
diff --git a/core/src/components/popover/popover.tsx b/core/src/components/popover/popover.tsx
index 21f5a68d047..2dd5c250857 100644
--- a/core/src/components/popover/popover.tsx
+++ b/core/src/components/popover/popover.tsx
@@ -565,7 +565,7 @@ export class Popover implements ComponentInterface, PopoverInterface {
 
   render() {
     const mode = getIonMode(this);
-    const { onLifecycle, popoverId, parentPopover, dismissOnSelect, presented, side, arrow, htmlAttributes } = this;
+    const { onLifecycle, popoverId, parentPopover, dismissOnSelect, side, arrow, htmlAttributes } = this;
     const desktop = isPlatform('desktop');
     const enableArrow = arrow && !parentPopover && !desktop;
 
@@ -584,7 +584,6 @@ export class Popover implements ComponentInterface, PopoverInterface {
           [mode]: true,
           'popover-translucent': this.translucent,
           'overlay-hidden': true,
-          'popover-interactive': presented,
           'popover-desktop': desktop,
           [`popover-side-${side}`]: true,
           'popover-nested': !!parentPopover
diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts
index 075b9e618a8..da9b3b806be 100644
--- a/core/src/utils/overlays.ts
+++ b/core/src/utils/overlays.ts
@@ -502,8 +502,13 @@ export const dismiss = async (
 
     activeAnimations.delete(overlay);
 
-    // Make overlay hidden again in case it is being reused
+    /**
+     * Make overlay hidden again in case it is being reused.
+     * We can safely remove pointer-events: none as
+     * overlay-hidden will set display: none.
+     */
     overlay.el.classList.add('overlay-hidden');
+    overlay.el.style.removeProperty('pointer-events');
 
   } catch (err) {
     console.error(err);