microsoft / clarity

A behavioral analytics library that uses dom mutations and user interactions to generate aggregated insights.
https://clarity.microsoft.com
MIT License
2.09k stars 208 forks source link

Recording: Background image not loading on HTML element #490

Closed mark-langer closed 5 months ago

mark-langer commented 11 months ago

Hi Clarity team,

Problem on our recordings, we cannot see the background image of our web app applied to the root element.

Technical examination The reason seems to be that a clarity style sheet overwrites our background-image property. Our background-image url has a path relative to our origin (/assets/images/...). This url seems not to be rewritten by Clarity, so that the playback tries to load the image from https://claritymicrosoft..com/assets/images/background-image8.jpg, which obviously fails.

The screenshots of the dev tools show what's going wrong. image

This is what it should look like (CSS property generated by Clarity disabled): image

Is there any way you can fix this? Or have we made a mistake in our config and this works as intended?

AbdelrhmanMagdy commented 5 months ago

Hello, I attempted to replicate the issue without success. Please ensure whether it has already been resolved on your end. If not, kindly provide the URL of the recording session to "ClarityMS@microsoft.com" for further investigation.

mark-langer commented 5 months ago

Hi @mark-langer , Thanks for looking into this.

We've switched to Hotjar for now because of this bug. If we ever switch back to Clarity, we'll investigate further and let you know! I'll close this issue for now.