Size change of MapboxMap composable sometimes results in black empty areas

[jspitzenpfeil]

Environment

• Android OS version: all
• Devices affected: all
• Maps SDK Version: 11.7.1

Observed behavior and steps to reproduce

We are using a MapboxMap composable that dynamically changes its size at runtime. This is achieved by hiding all other composables on the screen, allowing the MapboxMap composable to occupy the entire screen. Sporadically, the map does not re-render, and the changing area of the map remains black and empty.

We have tested this behavior with and without animations. With animations, it seems to be easier to reproduce, but occasionally this issue also occurs without animations.

mapbox_render_issue.webm

In the attached video, you can see a small black line remaining at the bottom after the animation. This line disappears once a configuration change happens and the map re-renders. This example is meant to illustrate the issue.

The more critical problem occurs when we resize the map directly to its full size without using animations. In this scenario, instead of a small black line, we occasionally encounter a large black area in size of the delta-size caused by the resize. (see the screenshot below)

Expected behavior

We expect the map composable to re-render correctly after the resize, without displaying any empty black areas.

Notes / preliminary analysis

We have currently implemented a workaround by using two MapboxMap composables: one for fullscreen and another for the smaller view. However, this approach keeps both MapboxMap instances in memory simultaneously, with both rendering at the same time, which unnecessarily consumes processing power.

We have also tried using the latest release version (11.8.1) as well as the current beta version (11.9.0-beta.1), but unfortunately, the issue persists.

Additional links and references

Screenshot of the more critical problem

Code for the sample video

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        enableEdgeToEdge()

        setContent {
            var fullscreen by rememberSaveable { mutableStateOf(false) }
            val animationSpec: FiniteAnimationSpec<IntSize> = tween(
                durationMillis = 3000,
                easing = LinearEasing,
            )

            val mapState = rememberMapState()
            val mapViewportState = remember { MapViewportState() }

            MapBoxBugTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Column(
                        modifier = Modifier
                            .padding(innerPadding)
                    ) {
                        Button(
                            onClick = { fullscreen = !fullscreen },
                            modifier = Modifier
                                .fillMaxWidth()
                        ) {
                            Text(
                                text = "Toggle fullscreen"
                            )
                        }

                        AnimatedVisibility(
                            visible = !fullscreen,
                            enter = expandVertically(animationSpec = animationSpec),
                            exit = shrinkVertically(animationSpec = animationSpec),
                        ) {
                            Box(
                                modifier = Modifier
                                    .fillMaxWidth()
                                    .height(300.dp)
                            )
                        }

                        MapboxMap(
                            scaleBar = {},
                            mapViewportState = mapViewportState,
                            mapState = mapState,
                            modifier = Modifier
                                .fillMaxWidth()
                        ) {
                        }
                    }
                }
            }
        }
    }
}