Sc-ion class changes app style


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.

Screenshot 2021-08-04 at 17.44.37

Does anyone know where this class comes from and how we can remove it?


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.

Hi Andy, I wrote up an issue here:

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!

Hey again! :slight_smile: 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.

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.

You are the best, we’re using HotJar, too. Thank you so much!!!

Hey @aub0 and @andyfrst,
Did you guys use hotjar with an Ionic mobile app as well or just web?
Trying to figure out if it works.