Heatmap Limitations

Currently, Hotjar's Heatmaps have the following limitations:

• Scrolling element on the < div > container: Hotjar builds Heatmaps on top of screenshots. When we load your page to take a screenshot of it, we check how large the page is and take a full-sized screenshot of it. The issue with pages that contain the scrolling part of a page within a < div > container rather than using the < body > container is that Hotjar cannot detect the scrolling content inside the < div > container when we take a screenshot.
• Pages which use "scroll-lock": Although the Heatmap is generated, the data collected is incorrect due to how scroll-lock pages work. Heatmaps are generated on top of screenshots which we take of your site. To do this we load your page in a 'screenshot browser' in full-size mode which takes a screenshot of the page.
• Pages which use parallax scrolling: The screenshot taken of the page is not correct. Parallax scrolling does not support viewports which extend all the way to show the page, which is how Hotjar takes screenshots of pages.
• Pages which use display:flex: The browser which takes the screenshot on the backend is not able to handle display:flex correctly, resulting in incorrect screenshots on your Heatmaps. We are searching for solutions.
• Dynamic content: Currently our Heatmaps take a screenshot exactly when the page loads. We don't offer the ability to take screenshots of different sections which are revealed in the page dynamically, such as items which show only after a user scrolls down or menus that open on scroll over. We are searching for solutions.
• Long pages: In some pages, the screenshot may appear cut-off due to a browser limitation. When we take screenshots of a page, we do this by taking a single screenshot of all the page. Browsers, however, do not render images larger beyond a certain point.
• iFrames: Although the iFrames are within the HTML of the page, we are unable to collect data or images within the iFrame. A blank space will show where the iFrame is present on the live page. 

Below are the maximum possible sizes that browsers render:

Not Seeing Your Issue Here?

Check out our Troubleshooting FAQ for Heatmap Guide for more information.