[Popovers]: wrong position if page is scaled

[Lukas742]

Bug Description

If transform: scale(...) is used, the popovers are not calculating their position correctly.

Affected Component

All components implementing popovers

Expected Behaviour

No response

Isolated Example

https://codesandbox.io/s/ui5-webcomponents-forked-sy4wcp?file=/index.html

Steps to Reproduce

1. Go to codeSandbox
2. See that the transform: scale(0.7) is applied to the body
3. Open the popover by clicking the button.
4. See that the popover is misaligned

Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

1.19.0

Browser

Chrome, Edge, Firefox, Safari

Operating System

No response

Additional Context

No response

Organization

MXP / UI5WCR

Declaration

• I’m not disclosing any internal or sensitive information.

[tsanislavgatev]

Hello colleagues,

Can you check this issue? It's reproducible in the code sandbox.

Best Regards,
Tsanislav

[georgimkv]

Reached out on our internal comms to find out about the usage and proposed to use CSS zoom: X

[Lukas742]

Hi @gmkv

unfortunately I also found an issue when using zoom. The popover is not displayed for elements close to the edge of the window:
https://codesandbox.io/s/ui5-webcomponents-forked-3tzfj2?file=/index.html

I will also try to explain our use case a little bit.
We're providing a WYSIWYG editor where users can create content by choosing between different components and data sources.
The editor provides a live preview so that users can directly see what their page will look like. There we currently use transform:scale to zoom in or zoom out similar to the responsive view in the dev tools of e.g. Chrome.
The zoom should really just be a zoom and not change the layout of the page, as it should always show the layout for that dimensions. So a responsive container would be great for different device options (e.g. mobile, tablet, etc.) but not for actually zooming in or out.
For example: A user only has a small screen, but wants to support a layout for large desktops. The user adds elements and wants to see what the whole screen would look like for those dimensions, so he zooms out without the UI reacting to the dimension shift, because there is virtually none.

[georgimkv]

#7908

[dimovpetar]

Hello @Lukas742 ,

Popovers now step on the native popover solution. This results in correctly positioned popovers, regardless of the body transform.
This will be available with version 2.0. Is this OK for you?

Best regards,
Petar

[Lukas742]

Hi @dimovpetar

yes, that's fine for us. Thank you!

[dimovpetar]

Hello @Lukas742,

This is the relevant pull request #8192.
Please re-test once version 2.0 is available.

Best regards,
Petar