Text overlaps on some phone models

[longhaiyan-lhy]

maplibre-gl-js version: 1.14.0 and latest version

browser: Huawei Mate 60 Pro system browser

Steps to Trigger Behavior

1. The code of my demo:
   Include the JavaScript and CSS files in the of HTML file.

<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css">
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>

Include the following code in the

var map = new maplibregl.Map({
    container: 'map',
    style: 'https://api.maptiler.com/maps/streets-v2/style.json?key=',
    center: [108.83597143103021, 34.19110581391911],
    zoom: 14
});

2. Use the built-in browser of the Huawei Mate 60 Pro to open the HTML file.

Link to Demonstration

Expected Behavior

All text on the map is displayed properly.

Actual Behavior

Texts on the map are overlapped on new models such as Huawei Mate 60 Pro.

Using mapbox-gl-js version 1.13.2 also has the problem of overlapping text, but the latest version of mapbox-gl-js does not have this problem.

[HarelM]

Since we don't have the relevant hardware and you say that this can't be reproduced on a regular mobile device, I guess you'll need to dig into the code and understand what can cause this... sorry...