Skip to content

fix(popover): correct positioning and sizing when html zoom is applied#31047

Open
KanhaiyaPandey wants to merge 1 commit intoionic-team:mainfrom
KanhaiyaPandey:fix/popover-zoom-positioning
Open

fix(popover): correct positioning and sizing when html zoom is applied#31047
KanhaiyaPandey wants to merge 1 commit intoionic-team:mainfrom
KanhaiyaPandey:fix/popover-zoom-positioning

Conversation

@KanhaiyaPandey
Copy link
Copy Markdown
Contributor

🐛 Issue #30919

When CSS zoom is applied on the html element (e.g. zoom: 1.5), the popover is rendered in an incorrect position.
Additionally, size="cover" results in incorrect sizing.


✅ Expected Behavior

Popover should be correctly positioned and sized regardless of the document zoom level.


🔧 Fix

  • Normalized DOMRect values and pointer coordinates based on the document zoom factor.
  • Ensures consistent calculations for positioning and sizing across zoom levels.

Files updated

  • core/src/components/popover/utils.ts
  • md.enter.ts
  • ios.enter.ts

🧪 Tests

  • Added E2E regression test for:
    • Popover positioning
    • size="cover" behavior under html { zoom: 1.5 }
  • Test file:
    • core/src/components/popover/test/zoom/popover.e2e.ts
  • Firefox is skipped since CSS zoom is not supported there.

▶️ How to verify

cd core
PLAYWRIGHT_TEST_BASE_URL=http://localhost:3333 \
npx playwright test src/components/popover/test/zoom/popover.e2e.ts --project="Mobile Chrome"

@KanhaiyaPandey KanhaiyaPandey requested a review from a team as a code owner March 30, 2026 13:28
@KanhaiyaPandey KanhaiyaPandey requested a review from ShaneK March 30, 2026 13:28
@vercel
Copy link
Copy Markdown

vercel bot commented Mar 30, 2026

@KanhaiyaPandey is attempting to deploy a commit to the Ionic Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions github-actions bot added the package: core @ionic/core package label Mar 30, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core @ionic/core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant