MOBILE-4857 theme: Fix popover position with CSS zoom

The previous attempt to fix the popover position using a CSS workaround
did not work on iOS.

Ionic uses getBoundingClientRect() and clientX/clientY to calculate
positions, which do not account for CSS zoom. We need to patch Ionic
to calculate the position correctly.

Author: albertgasset

patches/@ionic+core+8.7.5.patch

@@ -12,10 +12,48 @@ index ec9ab81..a384b35 100644
      // If the item has an href or button property it will render a native
      // anchor or button that is clickable
 diff --git a/node_modules/@ionic/core/components/popover.js b/node_modules/@ionic/core/components/popover.js
-index 56b1107..560b1d6 100644
+index 56b1107..03e5116 100644
 --- a/node_modules/@ionic/core/components/popover.js
 +++ b/node_modules/@ionic/core/components/popover.js
-@@ -763,8 +763,10 @@ const iosEnterAnimation = (baseEl, opts) => {
+@@ -23,7 +23,9 @@ const getArrowDimensions = (arrowEl) => {
+         return { arrowWidth: 0, arrowHeight: 0 };
+     }
+     const { width, height } = arrowEl.getBoundingClientRect();
+-    return { arrowWidth: width, arrowHeight: height };
++    // Patched: getBoundingClientRect result does not account for CSS zoom.
++    const zoom = parseFloat(document.documentElement.style.getPropertyValue('--zoom-ratio')) || 1;
++    return { arrowWidth: width / zoom, arrowHeight: height / zoom };
+ };
+ /**
+  * Returns the recommended dimensions of the popover
+@@ -38,9 +40,11 @@ const getPopoverDimensions = (size, contentEl, triggerEl) => {
+         const triggerDimensions = triggerEl.getBoundingClientRect();
+         contentWidth = triggerDimensions.width;
+     }
++    // Patched: getBoundingClientRect result does not account for CSS zoom.
++    const zoom = parseFloat(document.documentElement.style.getPropertyValue('--zoom-ratio')) || 1;
+     return {
+-        contentWidth,
+-        contentHeight,
++        contentWidth: contentWidth / zoom,
++        contentHeight: contentHeight / zoom,
+     };
+ };
+ const configureDismissInteraction = (triggerEl, triggerAction, popoverEl, parentPopoverEl) => {
+@@ -437,6 +441,12 @@ const getPopoverPosition = (isRTL, contentWidth, contentHeight, arrowWidth, arro
+             };
+             break;
+     }
++    // Patched: getBoundingClientRect result clientX/clientY do not account for CSS zoom.
++    const zoom = parseFloat(document.documentElement.style.getPropertyValue('--zoom-ratio')) || 1;
++    referenceCoordinates.top = referenceCoordinates.top / zoom;
++    referenceCoordinates.left = referenceCoordinates.left / zoom;
++    referenceCoordinates.width = referenceCoordinates.width / zoom;
++    referenceCoordinates.height = referenceCoordinates.height / zoom;
+     /**
+      * Get top/left offset that would allow
+      * popover to be positioned on the
+@@ -763,8 +773,10 @@ const iosEnterAnimation = (baseEl, opts) => {
      const { event: ev, size, trigger, reference, side, align } = opts;
      const doc = baseEl.ownerDocument;
      const isRTL = doc.dir === 'rtl';
@@ -28,7 +66,7 @@ index 56b1107..560b1d6 100644
      const root = getElementRoot(baseEl);
      const contentEl = root.querySelector('.popover-content');
      const arrowEl = root.querySelector('.popover-arrow');
-@@ -884,8 +886,10 @@ const mdEnterAnimation = (baseEl, opts) => {
+@@ -884,8 +896,10 @@ const mdEnterAnimation = (baseEl, opts) => {
      const { event: ev, size, trigger, reference, side, align } = opts;
      const doc = baseEl.ownerDocument;
      const isRTL = doc.dir === 'rtl';
@@ -55,10 +93,48 @@ index 4ce05a4..cc5562b 100644
      // If the item has an href or button property it will render a native
      // anchor or button that is clickable
 diff --git a/node_modules/@ionic/core/dist/cjs/ion-popover.cjs.entry.js b/node_modules/@ionic/core/dist/cjs/ion-popover.cjs.entry.js
-index 687100e..47a7389 100644
+index 687100e..9abe028 100644
 --- a/node_modules/@ionic/core/dist/cjs/ion-popover.cjs.entry.js
 +++ b/node_modules/@ionic/core/dist/cjs/ion-popover.cjs.entry.js
-@@ -766,8 +766,10 @@ const iosEnterAnimation = (baseEl, opts) => {
+@@ -26,7 +26,9 @@ const getArrowDimensions = (arrowEl) => {
+         return { arrowWidth: 0, arrowHeight: 0 };
+     }
+     const { width, height } = arrowEl.getBoundingClientRect();
+-    return { arrowWidth: width, arrowHeight: height };
++    // Patched: getBoundingClientRect result does not account for CSS zoom.
++    const zoom = parseFloat(document.documentElement.style.getPropertyValue('--zoom-ratio')) || 1;
++    return { arrowWidth: width / zoom, arrowHeight: height / zoom };
+ };
+ /**
+  * Returns the recommended dimensions of the popover
+@@ -41,9 +43,11 @@ const getPopoverDimensions = (size, contentEl, triggerEl) => {
+         const triggerDimensions = triggerEl.getBoundingClientRect();
+         contentWidth = triggerDimensions.width;
+     }
++    // Patched: getBoundingClientRect result does not account for CSS zoom.
++    const zoom = parseFloat(document.documentElement.style.getPropertyValue('--zoom-ratio')) || 1;
+     return {
+-        contentWidth,
+-        contentHeight,
++        contentWidth: contentWidth / zoom,
++        contentHeight: contentHeight / zoom,
+     };
+ };
+ const configureDismissInteraction = (triggerEl, triggerAction, popoverEl, parentPopoverEl) => {
+@@ -440,6 +444,12 @@ const getPopoverPosition = (isRTL, contentWidth, contentHeight, arrowWidth, arro
+             };
+             break;
+     }
++    // Patched: getBoundingClientRect result clientX/clientY do not account for CSS zoom.
++    const zoom = parseFloat(document.documentElement.style.getPropertyValue('--zoom-ratio')) || 1;
++    referenceCoordinates.top = referenceCoordinates.top / zoom;
++    referenceCoordinates.left = referenceCoordinates.left / zoom;
++    referenceCoordinates.width = referenceCoordinates.width / zoom;
++    referenceCoordinates.height = referenceCoordinates.height / zoom;
+     /**
+      * Get top/left offset that would allow
+      * popover to be positioned on the
+@@ -766,8 +776,10 @@ const iosEnterAnimation = (baseEl, opts) => {
      const { event: ev, size, trigger, reference, side, align } = opts;
      const doc = baseEl.ownerDocument;
      const isRTL = doc.dir === 'rtl';
@@ -71,7 +147,7 @@ index 687100e..47a7389 100644
      const root = helpers.getElementRoot(baseEl);
      const contentEl = root.querySelector('.popover-content');
      const arrowEl = root.querySelector('.popover-arrow');
-@@ -887,8 +889,10 @@ const mdEnterAnimation = (baseEl, opts) => {
+@@ -887,8 +899,10 @@ const mdEnterAnimation = (baseEl, opts) => {
      const { event: ev, size, trigger, reference, side, align } = opts;
      const doc = baseEl.ownerDocument;
      const isRTL = doc.dir === 'rtl';
@@ -145,10 +221,48 @@ index 215918e..b83a6b1 100644
      // If the item has an href or button property it will render a native
      // anchor or button that is clickable
 diff --git a/node_modules/@ionic/core/dist/esm/ion-popover.entry.js b/node_modules/@ionic/core/dist/esm/ion-popover.entry.js
-index 2e352cf..e9e6ff0 100644
+index 2e352cf..4231f48 100644
 --- a/node_modules/@ionic/core/dist/esm/ion-popover.entry.js
 +++ b/node_modules/@ionic/core/dist/esm/ion-popover.entry.js
-@@ -764,8 +764,10 @@ const iosEnterAnimation = (baseEl, opts) => {
+@@ -24,7 +24,9 @@ const getArrowDimensions = (arrowEl) => {
+         return { arrowWidth: 0, arrowHeight: 0 };
+     }
+     const { width, height } = arrowEl.getBoundingClientRect();
+-    return { arrowWidth: width, arrowHeight: height };
++    // Patched: getBoundingClientRect result does not account for CSS zoom.
++    const zoom = parseFloat(document.documentElement.style.getPropertyValue('--zoom-ratio')) || 1;
++    return { arrowWidth: width / zoom, arrowHeight: height / zoom };
+ };
+ /**
+  * Returns the recommended dimensions of the popover
+@@ -39,9 +41,11 @@ const getPopoverDimensions = (size, contentEl, triggerEl) => {
+         const triggerDimensions = triggerEl.getBoundingClientRect();
+         contentWidth = triggerDimensions.width;
+     }
++    // Patched: getBoundingClientRect result does not account for CSS zoom.
++    const zoom = parseFloat(document.documentElement.style.getPropertyValue('--zoom-ratio')) || 1;
+     return {
+-        contentWidth,
+-        contentHeight,
++        contentWidth: contentWidth / zoom,
++        contentHeight: contentHeight / zoom,
+     };
+ };
+ const configureDismissInteraction = (triggerEl, triggerAction, popoverEl, parentPopoverEl) => {
+@@ -438,6 +442,12 @@ const getPopoverPosition = (isRTL, contentWidth, contentHeight, arrowWidth, arro
+             };
+             break;
+     }
++    // Patched: getBoundingClientRect result clientX/clientY do not account for CSS zoom.
++    const zoom = parseFloat(document.documentElement.style.getPropertyValue('--zoom-ratio')) || 1;
++    referenceCoordinates.top = referenceCoordinates.top / zoom;
++    referenceCoordinates.left = referenceCoordinates.left / zoom;
++    referenceCoordinates.width = referenceCoordinates.width / zoom;
++    referenceCoordinates.height = referenceCoordinates.height / zoom;
+     /**
+      * Get top/left offset that would allow
+      * popover to be positioned on the
+@@ -764,8 +774,10 @@ const iosEnterAnimation = (baseEl, opts) => {
      const { event: ev, size, trigger, reference, side, align } = opts;
      const doc = baseEl.ownerDocument;
      const isRTL = doc.dir === 'rtl';
@@ -161,7 +275,7 @@ index 2e352cf..e9e6ff0 100644
      const root = getElementRoot(baseEl);
      const contentEl = root.querySelector('.popover-content');
      const arrowEl = root.querySelector('.popover-arrow');
-@@ -885,8 +887,10 @@ const mdEnterAnimation = (baseEl, opts) => {
+@@ -885,8 +897,10 @@ const mdEnterAnimation = (baseEl, opts) => {
      const { event: ev, size, trigger, reference, side, align } = opts;
      const doc = baseEl.ownerDocument;
      const isRTL = doc.dir === 'rtl';
@@ -175,7 +289,7 @@ index 2e352cf..e9e6ff0 100644
      const contentEl = root.querySelector('.popover-content');
      const referenceSizeEl = trigger || ((_a = ev === null || ev === void 0 ? void 0 : ev.detail) === null || _a === void 0 ? void 0 : _a.ionShadowTarget) || (ev === null || ev === void 0 ? void 0 : ev.target);
 diff --git a/node_modules/@ionic/core/hydrate/index.js b/node_modules/@ionic/core/hydrate/index.js
-index 7ea2833..56bf3a5 100644
+index 7ea2833..71aac42 100644
 --- a/node_modules/@ionic/core/hydrate/index.js
 +++ b/node_modules/@ionic/core/hydrate/index.js
 @@ -17985,7 +17985,7 @@ class Item {
@@ -187,7 +301,45 @@ index 7ea2833..56bf3a5 100644
      }
      // If the item has an href or button property it will render a native
      // anchor or button that is clickable
-@@ -26876,8 +26876,10 @@ const iosEnterAnimation$1 = (baseEl, opts) => {
+@@ -26136,7 +26136,9 @@ const getArrowDimensions = (arrowEl) => {
+         return { arrowWidth: 0, arrowHeight: 0 };
+     }
+     const { width, height } = arrowEl.getBoundingClientRect();
+-    return { arrowWidth: width, arrowHeight: height };
++    // Patched: getBoundingClientRect result does not account for CSS zoom.
++    const zoom = parseFloat(document.documentElement.style.getPropertyValue('--zoom-ratio')) || 1;
++    return { arrowWidth: width / zoom, arrowHeight: height / zoom };
+ };
+ /**
+  * Returns the recommended dimensions of the popover
+@@ -26151,9 +26153,11 @@ const getPopoverDimensions = (size, contentEl, triggerEl) => {
+         const triggerDimensions = triggerEl.getBoundingClientRect();
+         contentWidth = triggerDimensions.width;
+     }
++    // Patched: getBoundingClientRect result does not account for CSS zoom.
++    const zoom = parseFloat(document.documentElement.style.getPropertyValue('--zoom-ratio')) || 1;
+     return {
+-        contentWidth,
+-        contentHeight,
++        contentWidth: contentWidth / zoom,
++        contentHeight: contentHeight / zoom,
+     };
+ };
+ const configureDismissInteraction = (triggerEl, triggerAction, popoverEl, parentPopoverEl) => {
+@@ -26550,6 +26554,12 @@ const getPopoverPosition = (isRTL, contentWidth, contentHeight, arrowWidth, arro
+             };
+             break;
+     }
++    // Patched: getBoundingClientRect result clientX/clientY do not account for CSS zoom.
++    const zoom = parseFloat(document.documentElement.style.getPropertyValue('--zoom-ratio')) || 1;
++    referenceCoordinates.top = referenceCoordinates.top / zoom;
++    referenceCoordinates.left = referenceCoordinates.left / zoom;
++    referenceCoordinates.width = referenceCoordinates.width / zoom;
++    referenceCoordinates.height = referenceCoordinates.height / zoom;
+     /**
+      * Get top/left offset that would allow
+      * popover to be positioned on the
+@@ -26876,8 +26886,10 @@ const iosEnterAnimation$1 = (baseEl, opts) => {
      const { event: ev, size, trigger, reference, side, align } = opts;
      const doc = baseEl.ownerDocument;
      const isRTL = doc.dir === 'rtl';
@@ -200,7 +352,7 @@ index 7ea2833..56bf3a5 100644
      const root = getElementRoot(baseEl);
      const contentEl = root.querySelector('.popover-content');
      const arrowEl = root.querySelector('.popover-arrow');
-@@ -26997,8 +26999,10 @@ const mdEnterAnimation$1 = (baseEl, opts) => {
+@@ -26997,8 +27009,10 @@ const mdEnterAnimation$1 = (baseEl, opts) => {
      const { event: ev, size, trigger, reference, side, align } = opts;
      const doc = baseEl.ownerDocument;
      const isRTL = doc.dir === 'rtl';
@@ -214,7 +366,7 @@ index 7ea2833..56bf3a5 100644
      const contentEl = root.querySelector('.popover-content');
      const referenceSizeEl = trigger || ((_a = ev === null || ev === void 0 ? void 0 : ev.detail) === null || _a === void 0 ? void 0 : _a.ionShadowTarget) || (ev === null || ev === void 0 ? void 0 : ev.target);
 diff --git a/node_modules/@ionic/core/hydrate/index.mjs b/node_modules/@ionic/core/hydrate/index.mjs
-index bab3773..7ef8a51 100644
+index bab3773..5ccdb98 100644
 --- a/node_modules/@ionic/core/hydrate/index.mjs
 +++ b/node_modules/@ionic/core/hydrate/index.mjs
 @@ -17983,7 +17983,7 @@ class Item {
@@ -226,7 +378,45 @@ index bab3773..7ef8a51 100644
      }
      // If the item has an href or button property it will render a native
      // anchor or button that is clickable
-@@ -26874,8 +26874,10 @@ const iosEnterAnimation$1 = (baseEl, opts) => {
+@@ -26134,7 +26134,9 @@ const getArrowDimensions = (arrowEl) => {
+         return { arrowWidth: 0, arrowHeight: 0 };
+     }
+     const { width, height } = arrowEl.getBoundingClientRect();
+-    return { arrowWidth: width, arrowHeight: height };
++    // Patched: getBoundingClientRect result does not account for CSS zoom.
++    const zoom = parseFloat(document.documentElement.style.getPropertyValue('--zoom-ratio')) || 1;
++    return { arrowWidth: width / zoom, arrowHeight: height / zoom };
+ };
+ /**
+  * Returns the recommended dimensions of the popover
+@@ -26149,9 +26151,11 @@ const getPopoverDimensions = (size, contentEl, triggerEl) => {
+         const triggerDimensions = triggerEl.getBoundingClientRect();
+         contentWidth = triggerDimensions.width;
+     }
++    // Patched: getBoundingClientRect result does not account for CSS zoom.
++    const zoom = parseFloat(document.documentElement.style.getPropertyValue('--zoom-ratio')) || 1;
+     return {
+-        contentWidth,
+-        contentHeight,
++        contentWidth: contentWidth / zoom,
++        contentHeight: contentHeight / zoom,
+     };
+ };
+ const configureDismissInteraction = (triggerEl, triggerAction, popoverEl, parentPopoverEl) => {
+@@ -26548,6 +26552,12 @@ const getPopoverPosition = (isRTL, contentWidth, contentHeight, arrowWidth, arro
+             };
+             break;
+     }
++    // Patched: getBoundingClientRect result clientX/clientY do not account for CSS zoom.
++    const zoom = parseFloat(document.documentElement.style.getPropertyValue('--zoom-ratio')) || 1;
++    referenceCoordinates.top = referenceCoordinates.top / zoom;
++    referenceCoordinates.left = referenceCoordinates.left / zoom;
++    referenceCoordinates.width = referenceCoordinates.width / zoom;
++    referenceCoordinates.height = referenceCoordinates.height / zoom;
+     /**
+      * Get top/left offset that would allow
+      * popover to be positioned on the
+@@ -26874,8 +26884,10 @@ const iosEnterAnimation$1 = (baseEl, opts) => {
      const { event: ev, size, trigger, reference, side, align } = opts;
      const doc = baseEl.ownerDocument;
      const isRTL = doc.dir === 'rtl';
@@ -239,7 +429,7 @@ index bab3773..7ef8a51 100644
      const root = getElementRoot(baseEl);
      const contentEl = root.querySelector('.popover-content');
      const arrowEl = root.querySelector('.popover-arrow');
-@@ -26995,8 +26997,10 @@ const mdEnterAnimation$1 = (baseEl, opts) => {
+@@ -26995,8 +27007,10 @@ const mdEnterAnimation$1 = (baseEl, opts) => {
      const { event: ev, size, trigger, reference, side, align } = opts;
      const doc = baseEl.ownerDocument;
      const isRTL = doc.dir === 'rtl';

src/theme/components/ion-popover.scss

@@ -1,13 +1,6 @@
 ion-popover {
     &::part(content) {
         border-radius: var(--modal-radius);
-
-        // When CSS zoom is not 100%, the calculated position is incorrect.
-        // Workaround: revert zoom on the element but keep it for children.
-        zoom: calc(1 / var(--zoom-ratio));
-        & > * {
-            zoom: var(--zoom-ratio);
-        }
     }
     &.md {
         margin-top: 2px;