clarity: CSS file not loaded due to base tag
Hi there, we have an issue with Clarity. At the moment the CSS file is not loaded because Clarity does not load the CSS file from the correct path. We think it is connected to the base tag in our HTML code.
Our CSS file is at www.example.com/path/style.css
We have a base tag like that in the HTML code <base href="/path/">
At the moment in the network request the file is requested like that:
Request URL: https://clarity.microsoft.com/external/resources?url=https://example.com/styles.css×tamp=1664260249664 so the path is missing.
Any idea why that happens?
About this issue
- Original URL
- State: open
- Created 2 years ago
- Reactions: 1
- Comments: 29 (11 by maintainers)
Thanks @vmotornyi, the sample app was very helpful. I validated the issue is not with clarity-js but with the visualization. If you try out your sample app with the clarity-devtools extension – you will notice that it renders as expected.
I’ve created an internal bug on Clarity team to debug and fix this. Once that bug is resolved all your recordings >0.7.0 will start rendering properly. Sorry for the inconvenience and thanks for sharing sample app.
Just a heads-up, i’ve opened a PR (#296) that fixes this issue. 🙃
Yeah, this is really bad for us, none of our recordings render anymore. Loved clarity so much but it’s pretty much unusable till this is resolved.
It looks like this same issue has been reported multiple times in various ways since at least January.
Same problem here, waiting for fix or possible workaround
Hi @SRV332003 ,
Currently our webapp is using
<base href="/path/">for relative resources files (including css) and it’s working well. CSS file is loaded from www.example.com/path/style.cssBut in Clarity, it ignore the base tag and load from https://clarity.microsoft.com/external/resources?url=https://example.com/styles.css
Do you have any solution for this?
Thanks