Strange background sdf icon

Nobody has claimed this yet.

**mapbox-gl-js version**: latest

**browser**: last FF

### Steps to Trigger Behavior

add png image for symbol
```javascript
layout: {
'symbol-placement': 'line',
'symbol-spacing': [
'interpolate',
['exponential', 0.5],
['zoom'],
10,
140,
18,
200
],
'icon-allow-overlap': true,
'icon-image': 'direction',
'icon-size': .062
},
paint: {
'icon-color': [
'case',
['has', 'color'], ["get", "color"],
['has', 'user_color'], ["get", "user_color"],
settings.hexColor
],
'icon-opacity': .7
}
```

### Link to Demonstration

demo : https://bl.ocks.org/malwoodsantoro/8fd46a72e12c8c556a75d0b9f0af1669

public demo
Same result in my app

Similar issue : https://github.com/mapbox/mapbox-gl-js/issues/7204 which seems not resolved

### Expected Behavior
not an unexpected background of image
### Actual Behavior
an unexpected background of image

Start by running the linked bl.ocks.org demonstration in Firefox and reproduce the unexpected image background using the shown symbol layout and paint expressions. Compare the behavior with similar issue #7204; the work is done when the PNG symbol renders without the unexpected background while retaining the described icon styling.

Written by the indexing model from the issue text.