GoogleMap inside a Dialog glitches and shows unwanted trasparency

[matteo-goghero-leitha]

Please be sure to include as much information as possible:

Environment details

OS type and version: Android 14 (issue discovered only on Google Pixel 7a)
Library and version: com.google.maps.android:maps-compose:5.0.3
Compose version: BOM 2024.04.00, Compiler 1.5.10

Steps to reproduce

1. Create a simple layout with some content
2. Add a composable Dialog on top of this content
3. Put a GoogleMap inside the aforementioned dialog
4. Pan and Zoom the map and look closely around streets or railways in particular, you will notice a slight transparency around the border of map's elements that allows to see content beneath the dialog.

Code example

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Row(modifier = Modifier.fillMaxSize()) {
                Box(Modifier.weight(1f).fillMaxHeight().background(Color.Red))
                Box(Modifier.weight(1f).fillMaxHeight().background(Color.Green))
                Box(Modifier.weight(1f).fillMaxHeight().background(Color.Blue))
            }
            Dialog(
                onDismissRequest = {},
            ) {
                GoogleMap()
            }
        }
    }
}

Screenshots

This is what happens in our app, sometimes it glitches even worse

Footnote

This issue has only been observed on Google Pixel 7a, we tested 2 different 7a and both of them have this issue. Other phones with android 14 including S23 ultra and Pixel 4a do not have this issue.

We have also tried to:

• put a colored box inside the dialog and behind the map
• draw a filled rectangle with drawBehind modifier
• set the GoogleMapOptions.backgroundColor property
  but neither of those have resolved the issue.

Thanks.

[matteo-goghero-leitha]

Any updates on this?
Thank you.

[ln-12]

I am experiencing the exact same issue when using the map inside a Dialog composable. The background is transparent on a Pixel 7 but it works as expected in the emulator.

Pixel 7:

Emulator:

I am using Compose 1.6.8 and 6.1.2/4.3.2 of this library.

Another approach I tried is adding a background directly to the dialog bit it did also not work:

val localView = LocalView.current
LaunchedEffect(localView) {
    (localView.parent as? DialogWindowProvider)?.window?.setBackgroundDrawable(android.graphics.drawable.ColorDrawable(android.graphics.Color.RED))
}

[MaCls98]

Any updates on this or maybe a workaround? Thanks