SPFx Application Customizers getting "wrong" top placeholder in production

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

• browser version N/A
• SPFx version - 1.21.1
• Node.js version - 22.15.0
• etc

Describe the bug / error

We're seeing that only any modern page in SharePoint with the SPFx application customizer enabled with a production build 2 DIVs are being rendered that would be considered the DOM Element for the this._topPlaceholder.domElement which was set by using this line of code:

this._topPlaceholder = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Top, { onDispose: this.onDispose });

If I'm running in debug mode this doesn't happen but for production build I see two entries in the DOM. This wouldn't be a very big deal but if you set a preAllocatedApplicationCustomizerTopHeight height in the ClientSideInstance.xml and elements.xml under the assets folder of the sharepoint directory what I'm seeing is that the container that's returned is NOT the one with a fixed height and therefore I'm rendering my application customizer in a separate container and so now there is a blank space on the screen which is the empty dev with the placeholder height applied to it. I can see for other application customizer that I've deployed that didn't reserve the height there is two divs but since there is no pre allocated height you don't really notice it.

With preAllocated height:

Without preAllocated height:

Output looks like this:

Again, I'm seeing this in two production tenants.

Steps to reproduce

1. Create an SPFx application customizer with a preAllocatedApplicationCustomizerTopHeight
2. Add React/ReactDOM and a render function that renders a react element on the top placeholder dom element.
3. Render content in the top placeholder
4. Deploy to production

Expected behavior

Should only render one div for the placeholder

Reproduce the issue with SPFx 1.21.1 using an application customizer, preAllocatedApplicationCustomizerTopHeight, React/ReactDOM, and a production build. Compare the production and debug DOM around this._topPlaceholder.domElement; done means the reserved-height placeholder is the one rendered into and only one placeholder div appears.