No labels on map using ionic & angular Ios& Android

mapbox-gl-js version: 3.2.0

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 errors during zoom in/out:

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()
                        })
                    }
                });
            });
        })

    }

Start with the map initialization in ngOnInit and the style.load callback, then inspect the custom amd vector source, amd/{z}/{x}/{y}.pbf tiles, and /data.json layer definitions. Reproduce the iOS zoom behavior and compare it with the working browser behavior, focusing on the reported ImageBitmap and glyphs errors. Done means labels render on both iOS and Android without those errors.