Strange Jetpack Compose Navigation Transition Behavior

Question

I'm wondering why I get this weird transition when navigating to my Settings screen too quickly (video on YouTube: https://youtube.com/shorts/UPv66zqHMbo?feature=share). Here's all the related code (this is a multi-module app):

Code for my navigation graph:

fun NavGraphBuilder.settingsGraph(navController: NavController) {
    navigation(
        startDestination = SettingsGraphDestination.InitialScreen.route,
        route = SETTINGS_GRAPH_ROUTE
    ) {
        composable(
            route= SettingsGraphDestination.InitialScreen.route,
            enterTransition = {
                fadeIn(tween(durationMillis = CommonConstants.NAVIGATION_ANIMATION_DURATION_MILLIS))
            },
            exitTransition =  {
                fadeOut(tween(durationMillis = CommonConstants.NAVIGATION_ANIMATION_DURATION_MILLIS))
            }
        ) {
            SettingsScreen(
                navController = navController,
                onPhoneNumberSettingScreenClicked = {
                    navController.navigate(
                        SettingsGraphDestination.PhoneNumberAdjustment.route
                    )
                },
                onStepStrideAdjustmentScreenClicked = {
                    navController.navigate(
                        SettingsGraphDestination.StepStrideAdjustment.route
                    )
                }
            )
        }
    }
    }

SettingsScreen.kt:

    NirvanaScaffold(
        navController = navController,
        screenTitle = "تنظیمات"
    ) {
         Column(
            modifier = Modifier
                .fillMaxSize()
                .background(nirvanaScreenBackgroundBrush)
                .verticalScroll(rememberScrollState())
        ) {
            Spacer(modifier = Modifier.weight(0.1f))

            ButtonsArea(
                onSubscriptionButtonClicked = { onSubscriptionScreenClicked() },
                onChangePhoneNumberButtonClicked = { onPhoneNumberSettingScreenClicked() },
                onChangeStepStrideButtonClicked = { onStepStrideAdjustmentScreenClicked() },
                onChangeWeightButtonClicked = { onWeightAdjustmentScreenClicked() }
            )
            Spacer(modifier = Modifier.weight(1f))
        }
    }
}

RootGraph.kt:

dashboardGraph(
            navController = navController,
            nestedGraphs = {
                settingsGraph(navController = navController)
            },
            navigateToSettingsGraph = {navController.navigateToSettingsGraph()}
        )
    }

Does anybody know what may be causing this problem? I've tried deleting the enterTransition and exitTransition arguments also, but it did not work!

Answer 1

I have found another solution that works with navigation 2.7.6 in my case, I just added .fillMaxSize() modifier in my NavHost:

...    
TemplateTheme {
                Surface(
                    color = MaterialTheme.colorScheme.background
                ) {
                    Scaffold(
                        snackbarHost = { SnackbarHost(snackbarHostState) },
                        content = { paddingValues ->
                            NavHost(
                                modifier = Modifier
                                    .fillMaxSize()
                                    .padding(paddingValues),
                                navController = navController,
...

I'm also using a single top-level Scaffold in the app