Transparent backgrounds not working on Xiaomi devices in Versions > 6.4.0

[liviamoliveira]

It has been identified that from version 6.4.0 onwards, transparent backgrounds are no longer functioning correctly on Xiaomi devices. This issue impacts visual rendering, causing transparent backgrounds to appear opaque or behave unexpectedly.

Steps to Reproduce:

1. Update the application to a version higher than 6.4.0.

2. Test any component using a transparent background on a Xiaomi device (MIUI).

3. Observe that the background does not render as expected.

Expected Behaviour:
Transparent backgrounds should display correctly without altering the appearance of UI components.

Affected Devices:

Issue reproduced on Xiaomi devices running MIUI.

Additional Notes:

This may be related to specific MIUI configurations in newer versions or changes in the library managing visual styles within the application.

This behaviour has not been observed on devices from other manufacturers or in versions prior to 6.4.0

Impact

This issue could affect the user experience, particularly in areas of the application where transparency is integral to the design and usability.

Suggested Actions:

1. Investigate whether transparency rendering is impacted by changes in the library or API.

2. Verify compatibility with specific MIUI configurations.

3. Implement a workaround for Xiaomi devices or conditionally handle the behaviour based on manufacturer/system detection.

Priority: High

Assigned To: Designate a team responsible for UI/compatibility.

Please comment or update the progress as needed.

[gpeal]

• Have you tried this on non-Xiaomi phones?
• Can you attach an animation that reproduces this?
• Can you try setting the render mode to software?
• Does it work before 6.4.0?

[dpatel-mercari]

I've a similar issue(black background color instead of transparent) after upgrading the lib version from 6.4.0. However, using the render mode to software fixes the issue.

[gpeal]

@dpatel-mercari Can you confirm exactly which version it broke in? Did it work in 6.5.2? Can you attach an animation that is broken?

[dpatel-mercari]

@gpeal
Version 6.4.0: Working
Version 6.5.2: Not working. Shows black background if we do not use the render mode to software
Version 6.6.1: Not working. Shows black background if we do not use the render mode to software

I'm using lottie animation in Compose android app using below function the lottie file is from URL.

val composition by rememberLottieComposition(
        LottieCompositionSpec.Url(lottieUrl)
    )

    val progress by animateLottieCompositionAsState(
        composition = composition,
        iterations = LottieConstants.IterateForever,
    )

    LottieAnimation(
        composition = composition,
        progress = { progress },
        modifier = Modifier.size(width = 120.dp, height = 120.dp)
    )

[gpeal]

Can you attach an animation that reproduces this and can you try setting the render mode to software?

[dpatel-mercari]

Sorry, I can't attach an animation but I've shared the code which causes the issue. My animation has a character and background is transparent. As I shared earlier, setting the render mode to software working without any issue.

[gpeal]

@dpatel-mercari Without an example animation, I won't be able to help you. Feel free to edit your json to remove anything that isn't necessary to demonstrate the issue or have your designer make something simple that also reproduces it.