Shared Element Transitions in Compose not working with Landscapist Coil

[ErickSorto]

Please complete the following information:

• Library Version 2.4.4
• Affected Device(s) Samsung Galaxy S24

Describe the Bug:
The image fades away and then reappears on the next screen instead of a smooth transition.

Expected Behavior:
The image should smoothly transition from one screen to another.

Implementation:

CoilImage(
                imageModel = { decodedUrl },
                modifier = Modifier
                    .fillMaxWidth()
                    .aspectRatio(1f)
                    .sharedElement(
                        rememberSharedContentState(key = "image/$decodedUrl"),
                        animatedVisibilityScope = animatedVisibilityScope,
                        boundsTransform = { _, _ ->
                            tween(500)
                        }
                    ),
                component = rememberImageComponent {

                },
                imageOptions = ImageOptions(
                    contentScale = ContentScale.Crop
                ),
            )

Here is the buggy behavior:
https://github.com/user-attachments/assets/c726721e-7a7b-41ad-a8fc-ce0de6e4ebd8

Another example:
https://github.com/user-attachments/assets/ed602a25-c3cd-4c48-ac69-79cca6b70f16

[skydoves]

That looks weird. Pokedex-Compose project also uses it with the shared element transition animation but it works as expected 🤔

[ErickSorto]

That looks weird. Pokedex-Compose project also uses it with the shared element transition animation but it works as expected 🤔

After testing the Pokedex app, the issue persists. The same issue is found in Pokedex-Compose, but it is subtle.
The Pokemon disappears for half a second before the transition begins. It isn't a device issue because if you look at the GIFs in Pokedex-Compose repositories showing the transitions you can also see it disappear.

Just like this example in my app:
https://github.com/user-attachments/assets/ed602a25-c3cd-4c48-ac69-79cca6b70f16

Pokedex transition bug example:
https://github.com/user-attachments/assets/962373ba-e4aa-4d93-83f7-b79c6ec0adfa

[skydoves]

Hey @ErickSorto, do you mean the problem is image flickering?

[ErickSorto]

Hey @ErickSorto, do you mean the problem is image flickering?

Yeah the image flickers using CoilImage but when I use a regular AsynImage it does not flicker.

This is how it looks normally:
https://github.com/user-attachments/assets/c8c83888-fe1a-41d3-a869-9c3403cbea05

[skydoves]

I believe this issue is relevant from #632, but let me look into the details for better caching strategies.

[smithaaron]

I'm also experiencing what I believe is the same issue. This doesn't happen if I use Coil directly.

LandscapistSharedElementTransitionFlash.mp4

[DmitryVoronko]

Have the same issue on current version - 2.6.1, it doesn't flicker when I use regular AsynImage from coil 3.3.0