I have a problem with CDK Overlay in Angular Material with version 8.2
If I'm using the transform CSS property to scale body element, the positioning of the CDK Overlay are calculated incorrectly and all Angular Material components / elements (MatTooltip
, MatMenu
etc.)
are also displayed incorrectly. More precisely - their right, left, top, bottom properties are calculated incorrectly.
The test case is reproduced here: https://stackblitz.com/edit/cdk-overlay-zoom
It's known problem in Angular: https://github.com/angular/components/issues/10924
Code that I'm using to apply scale / zoom to body element:
const bodyElement = document.querySelector('body');
bodyElement.style.setProperty('-ms-transform', 'scale(1.5)');
bodyElement.style.setProperty('-moz-transform', 'scale(1.5)');
bodyElement.style.setProperty('-webkit-transform', 'scale(1.5)');
bodyElement.style.setProperty('transform', 'scale(1.5)');
bodyElement.style.setProperty('-ms-transform-origin', 'top left');
bodyElement.style.setProperty('-moz-transform-origin', 'top left');
bodyElement.style.setProperty('-webkit-transform-origin', 'top left');
bodyElement.style.setProperty('transform-origin', 'top left');
Can I do something to overcome this problem?
I was thinking about overriding ConnectedPositionStrategy
, GlobalPositionStrategy
and FlexibleConnectedPositionStrategy
by calling prototype or something else. I don't know exactly how to do it and where to do it to apply it globally (meaning to every component - MatSelect
, MatMenu
and others).
For example I could check actual scale and if it is different from base value I would calculate overlay bounding box / pane style (right, top, left, bottom properties) differently.
Is it possible? Is there another (better) solution?