Hi,
We’re using Ionic Angular on a Debian 10 server. We’ve noticed that when we load our app in Chrome a new “sc-ion” class is added to some elements (sc-ion-icon-h, sc-ion-button-md-h, etc.) breaking our UI. Please see screenshots below.
Does anyone know where this class comes from and how we can remove it?
Thanks,
aub0
August 20, 2021, 7:36pm
2
Hi Andy, I’m having the same problem but in my case those classes are only sometimes present. It works when they’re not present but is broken when they are. Did you have any luck diagnosing this? I can’t figure out where they’re coming from either.
Hi! We have exactly the same issue, but haven’t figured out where they’re coming from yet. Nobody has replied here or on Stack.
aub0
August 23, 2021, 1:06pm
4
Hi Andy, I wrote up an issue here:
opened 01:04PM - 23 Aug 21 UTC
triage
### Prequisites
- [X] I have read the [Contributing Guidelines](https://github.… com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/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.
### Code Reproduction URL
_No response_
### 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_
and referenced these posts from the forum. I am going to keep looking into it as well and will let you know if I make any progress.
1 Like
Thank you, I really appreciate it!
aub0
August 23, 2021, 6:22pm
6
Hey again!
Try this…
In chrome, get the problem to happen.
Then, in the dev tools console, run document.head.attachShadow
This will print out the contents of that function. You will probably not see ƒ attachShadow() { [native code] }
Assuming you see something else, double-click on it. That should take you to the sources tab where you can see where it’s implemented. Wherever that’s happening, you need it to not happen in order for Ionic to work properly. In my case, it’s implemented by HotJar, so I’m going to remove it for now.
2 Likes
You are the best, we’re using HotJar, too. Thank you so much!!!
wekas
August 5, 2022, 5:21am
8
Hey @aub0 and @andyfrst ,
I am using hotjar for an Angular web app with this plugin and it works great.
Does anyone know if hotjar will:
Work with Ionic.
Pass the app and play store reviews.
If not what alternatives are recommended?
Not so interested in heatmaps more in the screen recording.
EDIT:
It states here that it does not work, but not sure how reliable this is:
I managed to figure it out. See the comments in the issue I linked above, but the short version is that we’re using a tool called HotJar, and their JS code is overwriting a native browser function which confuses Stencil.