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(toast): account for safe-area on ios

Browse Source
This commit is contained in:
mhartington
2018-04-09 15:35:06 -04:00
parent e02f9902a5
commit d98421461e
3 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
core/src/components/toast/animations/ios.enter.ts
View File

@@ -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

4
core/src/components/toast/animations/ios.leave.ts
View File

@@ -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

2
core/src/components/toast/test/basic/index.html
View File

@@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8">
<title>Toast - Basic</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<script src="/dist/ionic.js"></script>
</head>