javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(popover): apply safe area adjustments for edge positioning in md mode

Browse Source
This commit is contained in:
ShaneK
2026-02-02 06:00:40 -08:00
parent 04c10985b1
commit bc5b3a3a84
2 changed files with 16 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
core/src/components/popover/animations/ios.enter.ts
View File

@@ -11,6 +11,12 @@ import {
} from '../utils';
const POPOVER_IOS_BODY_PADDING = 5;
/**
* Extra margin around viewport edges for safe area detection.
* When popover is within this distance of an edge, safe area
* CSS variables will be applied to prevent overlap with system UI.
*/
const POPOVER_IOS_SAFE_AREA_MARGIN = 25;
/**
* iOS Popover Enter Animation
@@ -53,7 +59,7 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
);
const padding = size === 'cover' ? 0 : POPOVER_IOS_BODY_PADDING;
const margin = size === 'cover' ? 0 : 25;
const margin = size === 'cover' ? 0 : POPOVER_IOS_SAFE_AREA_MARGIN;
const {
originX,

10
core/src/components/popover/animations/md.enter.ts
View File

@@ -5,6 +5,12 @@ import type { Animation } from '../../../interface';
import { calculateWindowAdjustment, getPopoverDimensions, getPopoverPosition } from '../utils';
const POPOVER_MD_BODY_PADDING = 12;
/**
* Extra margin around viewport edges for safe area detection.
* When popover is within this distance of an edge, safe area
* CSS variables will be applied to prevent overlap with system UI.
*/
const POPOVER_MD_SAFE_AREA_MARGIN = 25;
/**
* Md Popover Enter Animation
@@ -47,6 +53,8 @@ export const mdEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
const padding = size === 'cover' ? 0 : POPOVER_MD_BODY_PADDING;
const margin = size === 'cover' ? 0 : POPOVER_MD_SAFE_AREA_MARGIN;
const {
originX,
originY,
@@ -66,7 +74,7 @@ export const mdEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
bodyHeight,
contentWidth,
contentHeight,
0,
margin,
results.originX,
results.originY,
results.referenceCoordinates