CDK Overlay - Position Strategy with zoom css on parent

[jgodi]

Bug, feature request, or proposal:

If you are using the zoom CSS property to scale down UI elements the positioning of the CDK Overlay are calculated incorrectly.

What is the expected behavior?

Overlay positions properly as the non-zoomed styled div

What is the current behavior?

Overlay positions are calculated incorrectly when the zoom: 0.9 css property is on the parent container.

What are the steps to reproduce?

https://stackblitz.com/edit/cdk-overlay-zoom

What is the use-case or motivation for changing an existing behavior?

We have a Chrome only application that we use the zoom css property to scale down the UI. Using other methods of scaling does not work, so this is what we have to do.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular - 5.2.10
CDK - 5.2.5

[pfeigl]

@jgodi For a quick fix, you can do the following in your trigger directive: this._overlayRef.hostElement.style.zoom = "0.9"

However this brings me the question what the expected behavior actually is. Should the overlay only position correctly or should it also be zoomed accordingly when it is within the zoomed parent?

[Harikumar-Shankar]

@pfeigl I face a similar problem but the solution I need is to position the overlay correctly as original. I am using mat-select and the mat-options are displayed incorrectly after zoom. As we take this example setting zoom to overlayref reduces size but position is incorrect.

[baljinderkaur]

Yes I had the same issue. I want to use zoom property in different devices but the mat-select dropdown is not taking right position. Should be solved. But mat-autocomplete is working fine that do not have transform property and animation. Can't we use the same?

[ThisIsArnab]

It's angular material ver 10 now and this issue is still open!