Fix(cdk/overlay) : adaptation of clientRect according to the zoom level

[Gwe-n]

Fixed a bug on the cdk/overlay that was incorrectly positioned when the parent element contained a zoom level different from 1. The zoom level is applied on the bottom, left and top properties in order to adapt the positioning.

Fixes #10924

[Gwe-n]

I think it's a bad idea to use the css "zoom" property since it's not standard
https://developer.mozilla.org/en-US/docs/Web/CSS/zoom

but maybe the people who commented the ticket need it for a reason I don't know. I wonder if they would be better off using transform: scale() instead. 

But out of curiosity, I've looked at what should be done to fix this problem, I would have to modify the properties of getBoundingClientRect depending on the zoom value of the parent element.

[jelbourn]

@Gwe-n yeah, I'm not sure we'd want to add handling for this since the property is non-standard, having now looked at the original issue more closely. Adding this support increases the complexity of the code and would require corresponding tests.

[crisbeto]

To add to what was said above, we'd basically have to do it for all places where getBoundingClientRect is called. Furthermore, there are other cases like the native browser zoom that this won't handle.

[Gwe-n]

To add to what was said above, we'd basically have to do it for all places where getBoundingClientRect is called. Furthermore, there are other cases like the native browser zoom that this won't handle.

I don't think there's a problem with the browser zoom on this subject, am I wrong?

[crisbeto]

Ah sorry, I think I misremembered #10924 for being about the native browser zoom. I just double-checked it and it works fine.

[nlevari]

@Gwe-n This happens also with transform: scale()!
Setting scale on the body is an easy fix to support those HiDPI screen, which makes everything huge in some OS.
Please considering fixing it or help me find an easy workaround.

[Gwe-n]

@nlevari If I take the initial problem with the stackblitz example, and apply a transform: scale(x) instead of a zoom I do not reproduce the problem.

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


But maybe I didn't understand the whole problem. If you also have the issue with transform, can you provide a sample code? Thank you.

(are you sure we are talking about the same problem? because I have the impression that you are talking about applying a scale to the body)

[nlevari]

@Gwe-n You are right, I am talking about applying scale to the body.
I'm sorry, I followed this bug progress and ended up here. Thought it is connected. (you closed all other bugs relevant to scale)

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}