stretchX and stretchY causes sdf icons to be deformed

[bob-gray]

mapbox-gl-js version: 1.12.0

browser: Chrome 85

Steps to Trigger Behavior

1. Add an sdf image with stretchX or stretchY
2. Add a symbol layer using the sdf image as an icon

Link to Demonstration

https://jsfiddle.net/px6vkwm2/

Expected Behavior

I'd like to use icon-color to dynamically change the color of an icon image. This requires the icon image to be sdf: true. I'd also like to set stretchable areas of the icon image so it gracefully scales around the symbol text.

Below is a sample of what I'm trying to achieve. This was not done in Mapbox GL JS but it seems like all the features are here. I was hoping I could combine icon-color, stretchX, stretchY, icon-text-fit, and icon-anchor to allow dynamic text and color for point labels all using the same icon-image. Unfortunately I've ran into this issue with sdf and stretchable areas and #10025.

Actual Behavior

The icon image is deformed

[asheemmamoowala]

@bob-gray Thank you for reporting this issue. It looks like using icon-text-fit with sdf-based images is indeed broken.

[buffpojken]

This is sadly still the case in v2.8.2 - any idea if this is on a list somewhere to be fixed?

[YaroslavKormushyn]

Sadly, still in v2.12.0. Interestingly, it happens with any image complexity. I've tried using simple rectangles with rounded corners, as a colored chip icon, but any stretch property breaks the image completely and it stretches way beyond the contained text.

@asheemmamoowala what's the priority on this issue?

[oliver-youdooh]

Bump. Would love to see this resolved!