Box is appearing around Icons in Mapbox on sdf = true

Question

I am creating a symbol Layer in Mapbox having "sdf" attribute true and on zoom level(5-12) i am changing icon-size using Mapbox Expression.

Code:

const layer: mapboxgl.Layer = {
        "id": accessible,
        "type": "symbol",
        "source": seatSourceName,
        'source-layer': appConfiguration.api.seatSourceLayerName,
        "paint": {
            "icon-color": expression, //This is expression where i am changing color
            "icon-opacity": 1
        },
        "layout": {
            "icon-image": this.iconId,
            "icon-ignore-placement": true,
            "icon-padding": 0,
            "icon-size": [
                'interpolate',
                ['exponential', 2],
                ['zoom'],
                5, 0,
                12, 0.09
            ],
            'icon-allow-overlap': true,
            "icon-rotation-alignment": "viewport",
            "icon-rotate": 0,
            "icon-anchor": "center"
        }
    };

The problem is that i can see square background around icon's on smaller zoom level but on higher zoom level background disappears. This is happening only when I interpolate icon-size between zoom levels'.

Replicated on CodePen as well: https://codepen.io/dollysingh3192/pen/xxVLwWz?editors=0010 (Enable Cors Before checking)

Try to zoom-in/zoom-out around icon

Attaching zoom level around 9 image(Magnified)(In-correct)

Attaching zoom level 12(Correct)

I am creating sdf icon's as per: How can I create SDF-Icon's (used in Mapbox) from PNG?

I have no idea, what is happening here. Need Suggestion please..

Added on Mapbox Repository Github Issue's Page: https://github.com/mapbox/mapbox-gl-js/issues/9961

Answer 1

I achieved the solution of this problem by using third approach from StackOverflow Link

For more detail i added this problem to Mapbox github issue page:

https://github.com/mapbox/mapbox-gl-js/issues/9961