From 3657fc738634616d77840c2bbace24fb606ff874 Mon Sep 17 00:00:00 2001 From: Juan Sebastian Cardona Date: Tue, 8 Aug 2023 22:07:55 -0500 Subject: [PATCH 1/2] Change position: absolute for position:fixed in getNavigationModalCardStyle --- src/libs/Navigation/AppNavigator/AuthScreens.js | 1 - src/styles/getNavigationModalCardStyles/index.website.js | 6 ++---- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js index ddd61da272e6..71bf782959cd 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.js +++ b/src/libs/Navigation/AppNavigator/AuthScreens.js @@ -219,7 +219,6 @@ class AuthScreens extends React.Component { // we want pop in RHP since there are some flows that would work weird otherwise animationTypeForReplace: 'pop', cardStyle: getNavigationModalCardStyle({ - windowHeight: this.props.windowHeight, isSmallScreenWidth: this.props.isSmallScreenWidth, }), }; diff --git a/src/styles/getNavigationModalCardStyles/index.website.js b/src/styles/getNavigationModalCardStyles/index.website.js index c975d29301fb..d74b025ab195 100644 --- a/src/styles/getNavigationModalCardStyles/index.website.js +++ b/src/styles/getNavigationModalCardStyles/index.website.js @@ -1,6 +1,6 @@ import getBaseNavigationModalCardStyles from './getBaseNavigationModalCardStyles'; -export default ({windowHeight, isSmallScreenWidth}) => ({ +export default ({isSmallScreenWidth}) => ({ ...getBaseNavigationModalCardStyles({isSmallScreenWidth}), // This height is passed from JavaScript, instead of using CSS expressions like "100%" or "100vh", to work around @@ -8,7 +8,5 @@ export default ({windowHeight, isSmallScreenWidth}) => ({ // https://github.com/Expensify/App/issues/12005 // https://github.com/Expensify/App/issues/17824 // https://github.com/Expensify/App/issues/20709 - - height: `${windowHeight}px`, - minHeight: `${windowHeight}px`, + position: 'fixed', }); From 209cb768c9005f4ec5d1b0ae93e1e365c3ee65c8 Mon Sep 17 00:00:00 2001 From: Juan Sebastian Cardona Date: Wed, 9 Aug 2023 08:27:57 -0500 Subject: [PATCH 2/2] Fix comment --- src/styles/getNavigationModalCardStyles/index.website.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/getNavigationModalCardStyles/index.website.js b/src/styles/getNavigationModalCardStyles/index.website.js index d74b025ab195..f5668f955111 100644 --- a/src/styles/getNavigationModalCardStyles/index.website.js +++ b/src/styles/getNavigationModalCardStyles/index.website.js @@ -3,7 +3,7 @@ import getBaseNavigationModalCardStyles from './getBaseNavigationModalCardStyles export default ({isSmallScreenWidth}) => ({ ...getBaseNavigationModalCardStyles({isSmallScreenWidth}), - // This height is passed from JavaScript, instead of using CSS expressions like "100%" or "100vh", to work around + // position: fixed is set instead of position absolute to workaround Safari known issues of updating heights in DOM. // Safari issues: // https://github.com/Expensify/App/issues/12005 // https://github.com/Expensify/App/issues/17824