Plotly hover popup location misalignment issue after applying css trascform scale

Due to a specific requirement of fitting multiple charts which are added dynamically and arranged horizontally in available viewport without scroll I am using transform scale for example transform: translateZ(0) scale(0.50, 0.50) on charts based on available space, although the whole chart is scaled down uniformly but when mouse hover over is done on chart I observe there is offset between mouse location and hover popup location shown in attached screen shot

tooltipissue

Using resize() or relayout does not give crisp chats when they are scale down due to uneven transform of chart and labels.

issue

I have created code pen to explain issue

Regards
San

three reasons why you should buy plotly pro: support open source, get great support, host your plots and dashboards online