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

  • Official 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.

Didn't find what you were looking for?

New post