Layer not visible above building fill

Nobody has claimed this yet.

**mapbox-gl-js version**: 3.1.0

**browser**: Chrome 120.0.6099.216 (Official Build) (arm64)

### Steps to Trigger Behavior

1. Zoom to level 15 or greater
2. Click a building
3. The real estate boarders of the building has blue lines that sometimes are hidden by the building

### Link to Demonstration

This example is hard to replicate on jsbin.com or similar, since we use an internal tiles server. I will check if it is possible to create a shareable example some how.

### Expected Behavior
In production we have this behaviour with mapbox 3.1, then using an explicit url in the settings.
Zoom level 17:

### Actual Behavior
When leaving out `style` of the map settings, we get this behaviour, the border of the real estate is sometimes hidden by the fill of the building.
Zoom level 17:

### Demo code (will see if it is possible to create an example on jsbin or similar)
This is a working example that is as small as possible to illustrate the example, this is using Vue 3:

```

// imports leaved out for brevity

const mapboxRgbaToRgbString = (rgba) => {
const r = parseInt(String(rgba.r * 255));
const g = parseInt(String(rgba.g * 255));
const b = parseInt(String(rgba.b * 255));
return `rgb(${r},${g},${b})`;
};

// mapboxgl.accessToken = <access_token>;

const mapSettings = {
container: 'map-debug',
center: [18.0726, 59.3126],
zoom: 17,
doubleClickZoom: false,
crossSourceCollisions: false,
pitchWithRotate: false,
dragRotate: false,
boxZoom: false,
transformRequest: (url, resourceType) => {
if (resourceType !== 'Tile' || !url.includes('tiles-host')) {
return;
}
return {
url: `${url}?authorization=${store.state.session?.user?.jwt}`,
credentials: 'same-origin',
};
},
};

const sourceData = {
type: 'vector',
tiles: [
'https://tiles-host-1.com/maps/example-source-name/{z}/{x}/{y}/tile.pbf',
'https://tiles-host-2.com/maps/example-source-name/{z}/{x}/{y}/tile.pbf',
'https://tiles-host-3.com/maps/example-source-name/{z}/{x}/{y}/tile.pbf',
],
};

const realEstateLayer = {
id: 'real_estate',
type: 'fill',
source: 'example-source-name',
'source-layer': 'real_estate',
minzoom: 15,
paint: {
'fill-color': '#0080FF',
'fill-opacity': 0.2,
'fill-outline-color': '#000000',
},
filter: [
'all',
['<', ['get', 'num_surrounded_areas'], 3],
['<', ['get', 'area_m2'], 40000],
],
layout: {
visibility: 'visible',
},
};

onMounted(() => {
const map = new mapboxgl.Map(mapSettings);

map.on('load', () => {
map.addSource('example-source-name', sourceData);
map.addLayer(realEstateLayer);
});

map.on('click', (e) => {
let boundingBox = [
[e.point.x - 5, e.point.y - 5],
[e.point.x + 5, e.point.y + 5],
];
let highlightedFeatures = map.queryRenderedFeatures(
boundingBox,
{
layers: ['real_estate'],
},
);

const realEstateFeature = highlightedFeatures[0];

const lineColor = mapboxRgbaToRgbString(
realEstateFeature.layer.paint['fill-color'],
);

const highlightLayer = {
id: 'hLayerId',
type: 'line',
source: realEstateFeature.layer.source,
'source-layer': realEstateFeature.layer['source-layer'],
layout: {
visibility: 'visible',
},
paint: {
'line-width': 6,
'line-color': lineColor,
},
filter: ['in', 'id', realEstateFeature?.properties?.id],
};

if (map.getLayer('hLayerId')) {
map.removeLayer('hLayerId');
}
map.addLayer(highlightLayer);
});
});

```

Start with the provided Vue 3 demo, especially the click handler, `map.addLayer`, and the `real_estate` and `hLayerId` definitions; reproduce the issue at zoom 17 with and without the explicit style using an equivalent public tile source if possible. Done means the selected real-estate border remains visibly above the building fill in both configurations.

Written by the indexing model from the issue text.