How to change Angular Overlay position after applying body scale/zoom?

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?

Continue reading...