This is actually a bug report. Please move to different category, or tell me where to open bug reports.
Motivation
I am working on Qlik charts that are embedded in a website as mashups.
I am preparing a special print view, where I have to scale the charts to fit into the page without any horizontal scrolling.
I am trying to achieve this with `transform: scale(..)`on the element that contains a Qlik chart.
Problem
When I apply `transform: scale(factor)`, when Qlik redraws the element (e.g. on resize event), the chart is actually resized by the square of that factor. E.g. scale(.5) results in a resize that is more like scale(.25).
Steps to reproduce
I found an online demo where this can be reproduced easily.
https://webapps.qlik.com/masters/index.html#/stats
- (I can reproduce in Chromium-like browsers and in Firefox).
- Open browser developer tools (F12).
- Inspect the pie chart "2023 Masters Golfers by Nationality".
- On a parent element, e.g. ".qv-object-content-container", set the inline CSS rule "transform: scale(.5)".
- -> you see the pie chart shrink to 50% width
- Trigger a page resize event, e.g. by changing the size of the developer tools panel.
- -> now the pie chart is redrawn and shows as 25% width.
Expected: Pie chart stays at 50% size after redraw.
Actual: Pie chart appears at 25% size after redraw.
Technical explanation
On redraw, Qlik recalculates the positions and sizes of canvas and svg elements inside an `.ng-scope` wrapper.
For some reason, these calculations get confused if a parent element has transform: scale() on it.
Workaround with limitations
As a workaround, I am now trying to scale the parent only by the square root of the actual factor. E.g. if I want to scale by .64, instead I apply transform: scale(.8).
However this has some problem because not all elements are resized in this bad/squared way.
E.g. some of the charts are actually html tables, and these will only be resized by the correct scale factor.
Trying to target exactly the elements that need the special scale factor is tricky, because there are no good selectors to distinguish the different types.
