Map flickering during zooming

[dryaz]

Environment

• Android OS version: 12
• Devices affected: Samsung galaxy s10+ (SM-G975F/DS) (yet works fine on other devices)
• Maps SDK Version: 11.4.0 (compose impl)

Observed behavior and steps to reproduce

Zoom in-out, map has black artifacts while zooming.

https://github.com/mapbox/mapbox-maps-android/assets/1395176/54469e38-d8d8-40c6-a54d-f454aadda62b

Expected behavior

Map has no artifacts during zooming

Notes / preliminary analysis

• We use view annotations to show pins on map.
• Mapbox's demo with single view annotation works fine.

[dryaz]

Observation: it's not a SW issues probably but smth with HW rendering (maybe buffers for drawing on screen).

https://github.com/mapbox/mapbox-maps-android/assets/1395176/dab6e0dc-546f-400f-8f6c-c6968e32faf9

[kiryldz]

Observation: it's not a SW issues probably but smth with HW rendering (maybe buffers for drawing on screen).

EABF51FD-2C64-4DFD-8E03-A8032F4E9702.MP4

@dryaz thanks for reporting! In the last video it seems that the issue is quite easily reproducible when you bring the map to back / front, can you share the code that reproduces the issue?

[dryaz]

Observation: it's not a SW issues probably but smth with HW rendering (maybe buffers for drawing on screen). EABF51FD-2C64-4DFD-8E03-A8032F4E9702.MP4

@dryaz thanks for reporting! In the last video it seems that the issue is quite easily reproducible when you bring the map to back / front, can you share the code that reproduces the issue?

I've also noticed that when you press home on this screen and apps moved to recent gallery UI zoomed out smoothly but map keeps the same, seems like it keep drawing on full surface. Mapbox compose sample works fine on this device. Also our app works fine on other devices (including other samsungs).

You also could notice that you're trying to capture the screen - there is no such black bars/areas but recent apps still has the issue.

I've integrated mapbox in already existing app to replace google maps, so whole code is a bit 'complex' but here how it looks like:

Nothing fancy about implementation itself:

    MapboxMap(
        modifier = Modifier.fillMaxSize(),
        style = { MapStyle(style = MAP_STYLE) },
        mapViewportState = mapViewportState,
        compass = {},
        scaleBar = {},
        logo = {
            Logo(
                contentPadding = PaddingValues(
                    bottom = 16.dp,
                    start = 4.dp,
                    end = 4.dp,
                    top = 4.dp
                )
            )
        },
        attribution = {
            Attribution(
                contentPadding = PaddingValues(
                    bottom = 16.dp,
                    start = 92.dp,
                    top = 4.dp,
                    end = 4.dp
                )
            )
        }
    ) { /* Some map effects to setup map */ }

[dryaz]

And about that case of going to recent (which I believe should be a case). On the very first run of the app apps goes well to recents BUT next press on recent will have the issue.

Seems like smth about pause/resume of the map rendering engine on this very device.

[kiryldz]

@dryaz last comments seem to be related to completely another issue, right? Initially we were talking about artifacts when zooming out that I thought might've been connected with bunch of view annotations. However taking into account last comments + the fact you're able to reproduce this only on one device - I can't say I am sure what direction we should move now from here.

[dryaz]

@dryaz last comments seem to be related to completely another issue, right? Initially we were talking about artifacts when zooming out that I thought might've been connected with bunch of view annotations. However taking into account last comments + the fact you're able to reproduce this only on one device - I can't say I am sure what direction we should move now from here.

First I've faced this bug after zooming in/out with annotations but then during trying to find consistant repro steps I've encoutered this flow as well. Maybe the same but maybe different, don't know yet, keeping try to find it out locally as well.

[dryaz]

@kiryldz I've found out that on my side that issue with going to recent was happening when we've updated libs androidxComposeMaterial = "1.7.0-beta01" androidxComposeMaterial3 = "1.3.0-beta01"

I've reverted back to androidxComposeBom = "2024.06.00" (according to https://developer.android.com/develop/ui/compose/bom/bom-mapping it contains 1.6.8 for compose libs). androidxComposeMaterial3 = "1.3.0-alpha05" (we started to use 1.3.0 for an internal reason)

For that setup recent issue is gone and yet can't reproduce that black thing.

As I side note - I've came across that dependency solution while was trying to fix our other issue:

          Fatal Exception: java.lang.IllegalStateException: Recording currently in progress - missing #endRecording() call?
       at android.graphics.RenderNode.beginRecording(RenderNode.java:483)
       at android.graphics.RenderNode.beginRecording(RenderNode.java:502)
       at androidx.compose.ui.graphics.layer.GraphicsLayerV29.r(GraphicsLayerV29.java:5)
       at androidx.compose.ui.graphics.layer.GraphicsLayer.recordInternal(GraphicsLayer.java:52)
       at androidx.compose.ui.graphics.layer.GraphicsLayer.record-mL-hObY(GraphicsLayer.java:133)
       at androidx.compose.ui.platform.GraphicsLayerOwnerLayer.updateDisplayList(GraphicsLayerOwnerLayer.java:133)
       at androidx.compose.ui.platform.AndroidComposeView.dispatchDraw(AndroidComposeView.java:68)
       at android.view.View.draw(View.java:24629)
       at android.view.View.updateDisplayListIfDirty(View.java:23492)
       at android.view.View.draw(View.java:24356)
       at android.view.ViewGroup.drawChild(ViewGroup.java:4576)
       at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4337)
       at android.view.View.updateDisplayListIfDirty(View.java:23483)

According to stack it seems to be also related to some screenshoting/recording which also could be a 'recent' issue.

[divkovi12]

I have the similar issue, the map flickers every time some android compose widget (e.g. Button) is displayed above the map, so it can be reproduced by showing/hiding the widget above the map. I would say the reported issue is the same, the bottom sheet over the map is causing it.

[divkovi12]

I found solution for my problem, so maybe it will help someone also. I was using compose screen navigation library, so I updated it to androidx.navigation:navigation-compose:2.8.3 and this fixed most of flickering that happens between screen transitions.

mapBoxVersion = "11.7.1"

The most important thing that solved flickering during map interaction is composeMapInitOptions defined in the following way (notice textureView = true):

MapboxMap(
            modifier = modifier,
            mapViewportState = mapViewportState,
            mapState = mapState,
            composeMapInitOptions = with(LocalDensity.current) {
                remember {
                    ComposeMapInitOptions(
                        pixelRatio = density,
                        textureView = true,
                        antialiasingSampleCount = 4
                    )
                }
            },

[maciek-s]

I’m using Mapbox in Compose Multiplatform 1.7.0 and experiencing a similar bug. Everything works fine with Mapbox 11.4.2, but any newer version causes background flickering. Changing composeMapInitOptions not works for me