diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js
index 0e523002a939..63e2cb9c4972 100644
--- a/src/libs/Navigation/AppNavigator/AuthScreens.js
+++ b/src/libs/Navigation/AppNavigator/AuthScreens.js
@@ -157,7 +157,7 @@ class AuthScreens extends React.Component {
     }
 
     shouldComponentUpdate(nextProps) {
-        return nextProps.isSmallScreenWidth !== this.props.isSmallScreenWidth;
+        return nextProps.windowHeight !== this.props.windowHeight || nextProps.isSmallScreenWidth !== this.props.isSmallScreenWidth;
     }
 
     componentWillUnmount() {
@@ -184,7 +184,10 @@ class AuthScreens extends React.Component {
         };
         const modalScreenOptions = {
             ...commonModalScreenOptions,
-            cardStyle: getNavigationModalCardStyle(this.props.isSmallScreenWidth),
+            cardStyle: getNavigationModalCardStyle({
+                windowHeight: this.props.windowHeight,
+                isSmallScreenWidth: this.props.isSmallScreenWidth,
+            }),
             cardStyleInterpolator: (props) => modalCardStyleInterpolator(this.props.isSmallScreenWidth, false, props),
             cardOverlayEnabled: true,
 
diff --git a/src/styles/getNavigationModalCardStyles/getBaseNavigationModalCardStyles.js b/src/styles/getNavigationModalCardStyles/getBaseNavigationModalCardStyles.js
index 51691d801956..bddb639655a0 100644
--- a/src/styles/getNavigationModalCardStyles/getBaseNavigationModalCardStyles.js
+++ b/src/styles/getNavigationModalCardStyles/getBaseNavigationModalCardStyles.js
@@ -1,6 +1,6 @@
 import variables from '../variables';
 
-export default (isSmallScreenWidth) => ({
+export default ({isSmallScreenWidth}) => ({
     position: 'absolute',
     top: 0,
     right: 0,
diff --git a/src/styles/getNavigationModalCardStyles/index.website.js b/src/styles/getNavigationModalCardStyles/index.website.js
index 1b55c6891266..8f76cf8d17d5 100644
--- a/src/styles/getNavigationModalCardStyles/index.website.js
+++ b/src/styles/getNavigationModalCardStyles/index.website.js
@@ -1,9 +1,11 @@
 import getBaseNavigationModalCardStyles from './getBaseNavigationModalCardStyles';
 
-export default (isSmallScreenWidth) => ({
-    ...getBaseNavigationModalCardStyles(isSmallScreenWidth),
+export default ({windowHeight, isSmallScreenWidth}) => ({
+    ...getBaseNavigationModalCardStyles({isSmallScreenWidth}),
 
-    // This makes the modal card take up the full height of the screen on Desktop Safari and iOS Safari
-    // https://github.com/Expensify/App/pull/12509/files#r1018107162
-    height: 'calc(100vh - 100%)',
+    // This height is passed from JavaScript, instead of using CSS expressions like "100%" or "100vh", to work around
+    // Safari issues:
+    // https://github.com/Expensify/App/issues/12005
+    // https://github.com/Expensify/App/issues/17824
+    height: `${windowHeight}px`,
 });