In session replay, fullstory's CSS causing cascading issues with my own CSS
Answered
Recently I noticed my UI looks broken in fullstory replay but not in the actual product, did some investigation and realized there's a css cascading issue between fs CSS and my own CSS. Let's say I have a link like:
<a href="/home" class="home-link">Home</a>
My own CSS contains:.home-link {display: inline-block}
However fullstory has:a {display: var(--fs-display-inline);}
Maybe due to a loading ordering issue, fullstory's CSS always override mine, like in this screenshot(took from chrome devtool)

Any idea how to solve the problem? Thanks!
0
Comments
1 comment
Hello Alys Chen
Thanks for reaching out! This sounds like we may need to take a closer look at your account rather than provide generic advice through the community. I will create a support ticket on your behalf - Please look out for an email from us.
Here is some information it will be helpful for us to start digging in:
Do you have a public facing URL you can share that we can visit?
Does your site use CSS-in-JS?
Are you able to share a link to a session which isn't rendering correctly?
Can you also share a screenshot of how this really looks?
We will be in touch soon to see how we can help, so speak soon!
Gemma
Please sign in to leave a comment.