bug: sc-ion-*** classes randomly added to elements, resulting in rendering errors

[aub]

Prequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [X] v5.x
• [ ] v6.x

Current Behavior

I have an IonApp which contains an IonSplitPane and its menu and page. I am running this app on the desktop only. It generally works fine, but sometimes when I load the page the split pane is rendered with classes like:

sc-ion-split-pane-md-h md sc-ion-split-pane-md-s

and when this happens the page fails to render because these classes have a large effect on the CSS styles. These sc-ion-... classes are not applied only on the split pane but across the entire tree. If I reload the page, they go away and everything works fine.

This is documented in a few issues from the forum:

https://forum.ionicframework.com/t/ionic-5-web-app-chrome-css-issues-sc-ion-class-added/213363 https://forum.ionicframework.com/t/sc-ion-class-changes-app-style/213415 https://forum.ionicframework.com/t/ionsplitpane-randomly-fails-to-render/214041

Expected Behavior

I believe these classes are only meant to be included in a mobile android app, but I'm not sure. The CSS classes applied to the elements should be consistent in any case.

Steps to Reproduce

~~This is a hard one to reproduce as it happens randomly, but in my app I have been able to make it happen somewhat regularly by clearing the browser cache and reloading the page. I can work on putting together a demo app, but I don't have a lot of hope for it given how random the issue is.~~

~~I would be very happy to help debug the issue, but I've now spent a lot of time in the code and I can't figure out where these classes could be coming from. Given a nudge toward where they are generated I can add some debugging and try to figure out why they might be being added some of the time.~~

To reproduce it, you just need to overwrite the native document.head.attachShadow in the browser.

Code Reproduction URL

Here's a sample app that reproduces the issue. All I did was run the Ionic generator for a sidemenu-based app and then add the script here:

https://github.com/aub/breakin/blob/main/public/index.html#L6

Note that when the relevant line of that script is run, the menu doesn't appear and many of the elements get their sc-ion-*** classes applied to them. If you comment out that line, the menu will appear and the classes will be removed.

Ionic Info

Ionic:

Ionic CLI : 6.11.1 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/react 5.6.14

Capacitor:

Capacitor CLI : not installed @capacitor/core : 2.4.8

Utility:

cordova-res (update available: 0.15.3) : 0.15.1 native-run (update available: 1.3.0) : 1.0.0

System:

NodeJS : v16.5.0 (/Users/aubrey/.nvm/versions/node/v16.5.0/bin/node) npm : 7.19.1 OS : macOS Big Sur

─────────────────────────────────────────────────

 Ionic CLI update available: 6.11.1 → 6.14.1
      Run npm i -g @ionic/cli to update

─────────────────────────────────────────────────

Additional Information

No response