Incorrect rendering when SDF and non-SDF images are together on the same layer

Nobody has claimed this yet.

**mapbox-gl-js version**: Found in 3.3.0, confirmed present in 3.12.0

**browser**: Tested in Firefox and Chrome

### Steps to Trigger Behavior

1. Host the included `index.html`, `dot1.png`, and `dot2.png` static files in a "real" HTTP server (`python -m http.server` is my tool of choice).
2. Navigate to `index.html`
3. Pass in your access token
4. Observe: two dots, each with a different color.
5. Click the zoom-out button in the bottom-right.
6. Observe: now one of the dots is white and fuzzy, even though it's nowhere near the other.
7. Click the zoom-in button in the bottom-right.
8. Observe: we're back to the original colors.

### Link to Demonstration

[dot1.png](https://github.com/user-attachments/assets/c393ae2a-c944-4201-9ede-ff210f136d19)
[dot2.png](https://github.com/user-attachments/assets/f6914a65-ebfe-4580-a1ff-efb35e79498c)

index.html (click to expand)

```html

Repro

body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }

mapboxgl.accessToken = prompt('access token');
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v12',
zoom: 15.1,
center: [-83.04421, 42.33034],
});
map.addControl(new mapboxgl.NavigationControl(), 'bottom-right');
map.on('style.load', () => {
map.addImage('dot1', document.getElementById('dot1'));
map.addImage('dot2', document.getElementById('dot2'), { sdf: true });
map.addSource('dots', {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [
{ type: 'Feature', geometry: { type: 'Point', coordinates: [-83.040210, 42.330340] }, properties: { icon: 'dot1' } },
{ type: 'Feature', geometry: { type: 'Point', coordinates: [-83.047038, 42.332267] }, properties: { icon: 'dot2' } },
],
},
});
map.addLayer({
id: 'dots',
source: 'dots',
type: 'symbol',
layout: { 'icon-image': ['get', 'icon'] },
paint: { 'icon-color': '#FF0000' },
});
});

```

### Expected Behavior

The dots should both be drawable at the same time. Of course, in the actual use case, there are much more dots, and I want to be able to overlap them in any order, independent of which image is used.

### Actual Behavior

One of the dots gets fuzzy sometimes.

Start by serving the supplied index.html with dot1.png and dot2.png, then reproduce the rendering change while zooming. Inspect the addImage SDF setting and the symbol-layer rendering path; done means both dots retain their expected colors and sharpness together across zoom levels.

Written by the indexing model from the issue text.