3D buildings are still visible over the raster layer in the standard style

Currently, I am using standard style from Mapbox (mapbox://styles/mapbox/standard) to show 3D building. When I add the raster (image) layer to the map, it should be overlap the 3D building and only display the image. It works well in high level zoom. but when I zoom the map in, some edges of 3D building are still visible and overlap the image.

mapbox-gl-js version: 3.12.0

browser: Chrome (Version 136.0.7103.114 (Official Build) (arm64)

Steps to Trigger Behavior

// add raster layer into map
if (!map.getSource('metro')) {
    map.addSource('metro', {
      tileSize: 256,
      tiles: [<raster-url>],
      type: 'raster'
    })
  }
  if (!map.getLayer('metro')) {
    map.addLayer(
      {
        id: 'metro',
        slot: 'top',
        source: 'metro',
        type: 'raster'
      },
      getFirstDrawLayer(map)?.id
    )
  }

Demonstration

https://drive.google.com/file/d/1Mj25w0zlqvwfFsUjqyPgWfnQEv4rZuIT/view?usp=sharing

https://codesandbox.io/p/sandbox/mutable-thunder-j2kych

Expected Behavior

Raster layer should on top of the 3D building, and no edges of object are shown

Actual Behavior

Some edges of 3D object are shown and flicking

Start with the linked CodeSandbox reproduction and inspect the map.addSource and map.addLayer calls for the raster layer, especially its top slot and insertion position. Reproduce the issue at different zoom levels in Chrome and compare the rendered ordering. Done means the raster layer fully covers the 3D buildings without visible edges or flickering.