Deviating behavior from .ms-SPLegacyFabricBlock in workbench/ production

[tabit01]

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

SPFx version 1.19.0
Node version 18.20.4

Describe the bug / error

In one of our SPFx React web parts, local debugging is not working because of a CSS wrapper class being forced under a parent class named .ms-SPLegacyFabricBlock. Locally, this class is set to height 0px, and the wrapper class inherits that, thus becomes invisible. In production, the (also unsolicited) legacy class has a height of 100%, and the web parts works as expected. Clearly we need to investigate and fix the root cause of this legacy parent.

The head scratcher is that we are supposedly using styles from

"@fluentui/react": "8.106.4", ... 
"office-ui-fabric-react": "7.199.1" 

in our solution. We removed loadLegacyFabricCss: true from the manifest, without it helping.

If it is of any help, this is on top of the .scss file:

@import "~@fluentui/react/dist/sass/References.scss";

A related unsolved issue here: https://techcommunity.microsoft.com/discussions/sharepointdev/loadlegacyfabriccss-and-ms-splegacyfabricblock/4013750

Steps to reproduce

Follow the local debugging steps using VS Code from official documents.

Expected behavior

That our content wrapper was not being forced to 0px height from a legacy style fallback.

EDIT: The content in the mentioned wrapper uses several third party packages. Based on the wording in the MS documents, there could very well be legacy Fabric styles "hidden" in those dependencies. The question remains: why is the legacy style guard class height 100% in the production environment, and 0px in the hosted workbench?

[Ashlesha-MSFT]

Hello @tabit01,
Thank you for bringing this issue to our attention. We will look into it and get back to you shortly.

[Ashlesha-MSFT]

@tabit01,
Have you tried with Manually disable legacy Fabric styles by adding this CSS override in your .scss file or in the root component:

.ms-SPLegacyFabricBlock {
height: auto !important;
}

or inside your React component:

useEffect(() => {
const legacyFabricBlock = document.querySelector('.ms-SPLegacyFabricBlock');
if (legacyFabricBlock) {
legacyFabricBlock.setAttribute('style', 'height: auto !important;');
}
}, []);

could you please provide detailed reproduction steps?

[Ashlesha-MSFT]

We are closing this issue for now. If the problem persists, feel free to reopen it or open a new one.