From d98421461e4ff7ea75c0d605246654d7e842dd17 Mon Sep 17 00:00:00 2001 From: mhartington Date: Mon, 9 Apr 2018 15:35:06 -0400 Subject: [PATCH] fix(toast): account for safe-area on ios --- core/src/components/toast/animations/ios.enter.ts | 4 ++-- core/src/components/toast/animations/ios.leave.ts | 4 ++-- core/src/components/toast/test/basic/index.html | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/core/src/components/toast/animations/ios.enter.ts b/core/src/components/toast/animations/ios.enter.ts index 1d5b6f7de9..94da106a09 100644 --- a/core/src/components/toast/animations/ios.enter.ts +++ b/core/src/components/toast/animations/ios.enter.ts @@ -12,7 +12,7 @@ export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElem switch (position) { case 'top': - wrapperAnimation.fromTo('translateY', '-100%', '10px'); + wrapperAnimation.fromTo('translateY', '-100%', 'calc(env(safe-area-inset-top) + 10px)'); break; case 'middle': const topPosition = Math.floor( @@ -22,7 +22,7 @@ export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElem wrapperAnimation.fromTo('opacity', 0.01, 1); break; default: - wrapperAnimation.fromTo('translateY', '100%', '-10px'); + wrapperAnimation.fromTo('translateY', '100%', 'calc(-10px - env(safe-area-inset-bottom))'); break; } return Promise.resolve(baseAnimation diff --git a/core/src/components/toast/animations/ios.leave.ts b/core/src/components/toast/animations/ios.leave.ts index 9b7a89e344..349a383a16 100644 --- a/core/src/components/toast/animations/ios.leave.ts +++ b/core/src/components/toast/animations/ios.leave.ts @@ -11,13 +11,13 @@ export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElem wrapperAnimation.addElement(wrapperEle); switch (position) { case 'top': - wrapperAnimation.fromTo('translateY', `${10}px`, '-100%'); + wrapperAnimation.fromTo('translateY', 'calc(env(safe-area-inset-top) + 10px)', '-100%'); break; case 'middle': wrapperAnimation.fromTo('opacity', 0.99, 0); break; default: - wrapperAnimation.fromTo('translateY', `${0 - 10}px`, '100%'); + wrapperAnimation.fromTo('translateY', 'calc(-10px - env(safe-area-inset-bottom))', '100%'); break; } return Promise.resolve(baseAnimation diff --git a/core/src/components/toast/test/basic/index.html b/core/src/components/toast/test/basic/index.html index c879a5940a..823210e510 100644 --- a/core/src/components/toast/test/basic/index.html +++ b/core/src/components/toast/test/basic/index.html @@ -4,7 +4,7 @@ Toast - Basic - +