1914921 - body size when using zoom in css

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[[e-mail]]

Attachment: Capture.PNG

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:129.0) Gecko/20100101 Firefox/129.0

Steps to reproduce:

I have a site that uses certain JS libraries to create elements like a dynamic dropdown (select2) or a wysiwyg html editor (TinyMCE), and when you click on some of their controls they display a dropdown based on the size of the body to position it correctly.
When the zoom value is applied to the site (here .9), the values (width / heights) on the body and other parent elements are not correctly reflected, so the JS script that calculates the offset to correctly position the dropdown fails to display it correctly (see screenshot).

This bug only appears on Firefox (Gecko), not on Safari (Webkit), nor on Chrome, Opera, Edge (Chromium).

Actual results:

I have a site that uses certain JS libraries to create elements like a dynamic dropdown (select2) or a wysiwyg html editor (TinyMCE), and when you click on some of their controls they display a dropdown based on the size of the body to position it correctly.
When the zoom value is applied to the site (here .9), the values (width / heights) on the body and other parent elements are not correctly reflected, so the JS script that calculates the offset to correctly position the dropdown fails to display it correctly (see screenshot).

This bug only appears on Firefox (Gecko), not on Safari (Webkit), nor on Chrome, Opera, Edge (Chromium).

Expected results:

There should be no offset when positioning the dropdown.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::CSS Parsing and Computation' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Mayank Bansal]

Can you attach a reduced testcase to this bug? Or provide a publicly available access to your app.
Being able to reproduce the bug on their machines will make it much easier for the devs to diagnose.

Thanks!

Comment 3

[[e-mail]]

(In reply to Mayank Bansal from comment #2)

Can you attach a reduced testcase to this bug? Or provide a publicly available access to your app.
Being able to reproduce the bug on their machines will make it much easier for the devs to diagnose.

Thanks!

Hello

You can check for example on this site https://select2.org/getting-started/basic-usage and check for the select2 dropdown.

Now put a zoom: 90% on all the entire body

And open the select2 dropdown.

It's not aligned anymore.

Comment 4

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:jfkthame, could you have a look please?

For more information, please visit BugBot documentation.

Comment 5

[Emilio Cobos Álvarez [:emilio]]

It's not aligned in Chrome either. The reason is that the plugin is probably using .getBoundingClientRect which doesn't account for zoom. You need to divide by the right zoom (e.g. using .currentCSSZoom) in order to get stuff to align.