Mapbox WebGL Context Lost on Xiaomi Redmi

[giuseeFG]

Issue Title

Mapbox WebGL Context Lost on Xiaomi Redmi 12 5G

Description

I am experiencing an issue with a WebGL-based map (using Mapbox GL) that occurs only on Xiaomi Redmi 12 5G devices. The issue does not occur on other devices or brands. When loading the map, the following error is displayed in the browser console:

WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost

As a result, the map interface behaves erratically and does not load properly.

Steps to Reproduce

1. Use a Xiaomi Redmi.
2. Open the web application that uses Mapbox GL for rendering maps.
3. Observe the browser console for the WebGL: CONTEXT_LOST_WEBGL error.
4. Notice that the map interface does not load and becomes unusable.

Expected Behavior

The map should load and behave normally, as it does on other devices.

Actual Behavior

The map fails to load, and the application becomes unstable due to the WebGL context being lost.

Device Details

• Device Name: Xiaomi Redmi 12 5G
• System Version: 1.0.10.0.UMWEUXM
• Android Version: 14 (UKQ1.230917.001)

Environment

• "mapbox-gl": "^2.15.0",
• "ngx-mapbox-gl": "^10.0.0",

Additional Information

This issue seems to be specific to Xiaomi Redmi 12. The map works correctly on other devices, including those with similar Android versions.
On iOS no problems.

If there are any additional tests or debug steps you would like me to perform on the device, please let me know.

[giuseeFG]

video_2024-11-25_13-56-25.mp4