ionic-framework icon indicating copy to clipboard operation
ionic-framework copied to clipboard

Published 20 hours ago • verified publisher icon ionic-team

fix(popover): adjust position to account for approximate safe area

Open averyjohnston opened this issue 1 year ago • 6 comments
trafficstars

Issue number: resolves #28411

What is the current behavior?

Popover position does not account for safe area. iOS has some existing logic that attempts to do so, but it always uses a hardcoded value of 25px for the margin (or 0 for size="cover" popovers).

What is the new behavior?

The most straightforward way of accounting for safe area would be to use window.getComputedStyle() to calculate the safe area margins when the popover's position is being determined. However, this function is very expensive, so using it would introduce performance issues. Until a better strategy can be found that properly accounts for all cases, this PR approximates things by making a guess at the safe area margins.

Note that the position of the arrow on iOS popovers has not been adjusted to account for safe area in the same way as the popover content. I chose to leave it like this because the behavior in main doesn't adjust the arrow either, even with the 25px guess at the safe area margin. Moving the arrow will also add complexity to account for the different values of side, which increases the risk of bugs. If it does need fixing, it would probably be best to do that as separate scope.

This PR has been targeted to a minor release to de-risk the behavior change.

The easiest way to test the behavior is with the adjustment test, as this lets you present the popover from anywhere on the screen. Checking the new "show safe area approximation" checkbox highlights the safe area margin guesses in blue.

Does this introduce a breaking change?

  • [ ] Yes
  • [x] No

Other information

averyjohnston avatar Feb 16 '24 18:02 averyjohnston

@amandaejohnston is this ready for review? I noticed that a screenshot test is failing.

thetaPC avatar Feb 28 '24 21:02 thetaPC

@thetaPC Fixed the screenshots 👍 This is indeed ready for review.

averyjohnston avatar Mar 04 '24 15:03 averyjohnston

Closing for now due to shifting priorities. This may be reopened later after we've had a chance to discuss the strategy internally.

averyjohnston avatar Mar 25 '24 15:03 averyjohnston

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
ionic-framework ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 16, 2024 4:07pm

vercel[bot] avatar Apr 16 '24 15:04 vercel[bot]