Heatmap Not Rending "below the fold"

(Casey) #1


I’ve got a heatmap that’s not fully rendering. I’ve attached an image that shows the above the fold content rendering correctly, however anything under the fold is not rendered. It’s as if the heatmap dashboard or the recorder isn’t aware that the website has 4 to 5 times more height to it.

Can someone please let me know if there is a solution to this or if this is an unexpected bug? The website is https://www.usacarrecord.com.


(Jason) #2

Hi casey,

Could you contact us at shop@innocraft.com? We would need to organize having a look at your instance to troubleshoot further.


(Casey) #3

Hi Jason,

I sent a support ticket through the website and I got a response from support@matomo.org saying it had been passed on to the premium features support team.

That was on the 25th of January and they haven’t got back to me yet.



(Casey) #4

Just for future reference and anyone who has this issue. The problem is caused by using height:100% which messes with the iFrame.

The solution is to set a min-height for when the heatmap is active. The “.matomoHsr” class is only added to the HTML root when you’re viewing the heatmap.

.matomoHsr {
    min-height: 2000px !important;

.matomoHsr .page {
    min-height: 2000px !important; 

(Jason) #5

For a list of all possible ways to apply a custom CSS for heatmaps please see our FAQ: How do I apply custom stylesheets when a heatmap is generated or a session recording replayed? FAQ - Analytics Platform - Matomo