javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 23:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(modal): swipeable modal now works in firefox (#20714)

Browse Source 
fixes #20706
This commit is contained in:
Liam DeBeasi
2020-03-06 13:19:48 -05:00
committed by GitHub
parent 22d5256810
commit 7d260b96a7
3 changed files with 16 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,7 +31,13 @@ export const iosEnterAnimation = (
.addAnimation([backdropAnimation, wrapperAnimation]); .addAnimation([backdropAnimation, wrapperAnimation]);
if (presentingEl) { if (presentingEl) {
const modalTransform = (presentingEl.tagName === 'ION-MODAL' && (presentingEl as HTMLIonModalElement).presentingElement !== undefined) ? '-10px' : 'max(30px, var(--ion-safe-area-top))'; /**
* Fallback for browsers that does not support `max()` (ex: Firefox)
* No need to wrry about statusbar padding since engines like Gecko
* are not used as the engine for standlone Cordova/Capacitor apps
*/
const transformOffset = (!CSS.supports('width', 'max(0px, 1px)')) ? '30px' : 'max(30px, var(--ion-safe-area-top))';
const modalTransform = (presentingEl.tagName === 'ION-MODAL' && (presentingEl as HTMLIonModalElement).presentingElement !== undefined) ? '-10px' : transformOffset;
const bodyEl = document.body; const bodyEl = document.body;
const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE; const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
const finalTransform = `translateY(${modalTransform}) scale(${toPresentingScale})`; const finalTransform = `translateY(${modalTransform}) scale(${toPresentingScale})`;

3
core/src/components/modal/animations/ios.leave.ts
View File

@ -27,7 +27,8 @@ export const iosLeaveAnimation = (
.addAnimation([backdropAnimation, wrapperAnimation]); .addAnimation([backdropAnimation, wrapperAnimation]);
if (presentingEl) { if (presentingEl) {
const modalTransform = (presentingEl.tagName === 'ION-MODAL' && (presentingEl as HTMLIonModalElement).presentingElement !== undefined) ? '-10px' : 'max(30px, var(--ion-safe-area-top))'; const transformOffset = (!CSS.supports('width', 'max(0px, 1px)')) ? '30px' : 'max(30px, var(--ion-safe-area-top))';
const modalTransform = (presentingEl.tagName === 'ION-MODAL' && (presentingEl as HTMLIonModalElement).presentingElement !== undefined) ? '-10px' : transformOffset;
const bodyEl = document.body; const bodyEl = document.body;
const currentPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE; const currentPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
const presentingAnimation = createAnimation() const presentingAnimation = createAnimation()

6
core/src/components/modal/modal.ios.scss
View File

@ -28,5 +28,11 @@
:host(.modal-card) .modal-wrapper { :host(.modal-card) .modal-wrapper {
@include border-radius($modal-ios-border-radius, $modal-ios-border-radius, 0, 0); @include border-radius($modal-ios-border-radius, $modal-ios-border-radius, 0, 0);
height: calc(100% - 40px);
}
@supports (width: max(0px, 1px)) {
:host(.modal-card) .modal-wrapper {
height: calc(100% - max(30px, var(--ion-safe-area-top)) - 10px); height: calc(100% - max(30px, var(--ion-safe-area-top)) - 10px);
} }
}