No labels on map using MapLibre GL JS angular

Question

I'm encountering an error when running my Ionic Angular application on iOS that involves MapboxGL. l have used MapboxGL to display maps and labels from PBF sources. On broswer working fine no issue. However, when running the application on iOS, I receive the following error:

Error: Could not load image because of Cannot create an ImageBitmap from an empty buffer. Please make sure to use a supported image type such as PNG or JPEG. Note that SVGs are not supported.

and

[error] - {"message":"undefined is not an object (evaluating 'v.glyphs')"}

Finally, no labels show up. I've tried to debug this issue but haven't been successful so far. It seems to be specific to iOS, as the application works fine on other platforms.

code :

ngOnInit(): void {

        const storedLat = localStorage.getItem('lat');
        const storedLng = localStorage.getItem('lng');
        const storedZoom = localStorage.getItem('zoom') ?? '5'; // Default zoom level

        // Convert the stored values to numbers, use defaults if they are not available
        const lat = storedLat ? parseFloat(storedLat) : 33.154514;
        const lng = storedLng ? parseFloat(storedLng) : 44.140448;
        const zoom = parseFloat(storedZoom);

           this.mapbox = new mapboxgl.Map({
                container: 'map',
                zoom: zoom,
                center: [lng, lat],
                
                accessToken: ''
            });
        // Listen for dragend event
        this.mapbox.on('dragend', () => {
            const center = this.mapbox.getCenter();
            localStorage.setItem('lat', center.lat.toString());
            localStorage.setItem('lng', center.lng.toString());
            localStorage.setItem('zoom', this.mapbox.getZoom().toString());
        });

        // Listen for zoomend event
        this.mapbox.on('zoomend', () => {
            const center = this.mapbox.getCenter();
            localStorage.setItem('lat', center.lat.toString());
            localStorage.setItem('lng', center.lng.toString());
            localStorage.setItem('zoom', this.mapbox.getZoom().toString());
        });

        if (this.mapbox.loaded) {
            this.mapbox.resize();
            
        }
        
        this.mapbox.once('style.load',()=>{
            this.mapbox.resize();
            this.mapbox.showTileBoundaries =true
            // Add the custom PBF source for the source data
            this.api.http.get('/data.json').subscribe((sourceData: any) => {
                console.log('sourceData',sourceData);

                this.mapbox.addSource('amd', {
                    type:'vector',
                    tiles: [
                        'amd/{z}/{x}/{y}.pbf'
                    ],
                    minzoom: 11,
                    maxzoom: 16,
                });
                sourceData.layers.forEach((layer: any) => {
                    var existingLayer = this.mapbox.getLayer(layer.id);
                    if (existingLayer) {
                        this.mapbox.removeLayer(layer.id);
                    }
                    if (layer.source == 'amd') {
                        this.mapbox.addLayer({
                            id: layer.id,
                            type: layer.type,
                            source: layer.source,
                            'source-layer': layer['source-layer'],
                            paint: layer.paint,
                            layout: {
                            'text-field': ['get', 'txt'],
                            'text-size': 12,
                            'text-variable-anchor': ['top', 'bottom', 'left', 'right'],
                            'text-justify': 'auto',
                         },
                            
                        }).on('drag',()=>{
                            this.mapbox.showTileBoundaries =true
                            this.mapbox.resize()
                        })
                    }
                });
            });
        })

    }