Quasar: q-menu is not always perfectly alligned

[Demivan]

Describe the bug
When using q-menu with anchor="bottom right" self="top right" it is not perfectly aligned to the edge of a button.

Codepen/jsFiddle/Codesandbox (required)
https://codepen.io/demivan/pen/zYGmdem

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://codepen.io/demivan/pen/zYGmdem'
2. Click on button
3. See that right edge of menu is not aligned to the right edge of a button

Expected behavior
When using anchor="* right" self="* right" right edges should be aligned.

Screenshots
Right now:

Should be:

Platform (please complete the following information):
OS: Arch Linux
Browsers: Firefox 75, Chromium 80
Reproducible on Windows too

[pdanpdan]

I'm sorry but I cannot reproduce it - can you reproduce it using that codepen?

[Demivan]

I can reproduce it there. First screenshot is directly from that codepen. Second one is me changing left: 408px; to left: 409px; on q-menu element manually.
What left value do you get in your browser?
It feels like there is some rounding error. So browsers round position of the button one way and q-menu position is rounded other way in code.

[pdanpdan]

It must be some rounding. I'll try to see if there is something that can be done.

[rfox12]

Something that is a frequent "gotcha" for me on trying to reproduce small spacing differences: be sure to consider your browser zoom level... I run at 125% zoom due to my large monitor size. And over the months I've noticed that zoom can contribute to issues....

[pdanpdan]

I can reproduce the problem sometimes, the problem is that it's related to internal rounding in browser. When I have some spare time I'll try to see if I can do something.

[ThiefSoul]

Any updates on that?
I prepared new reproduction on codepen (based on the above one).

The only thing is changing is width of the colored box (1px with each loop).
The effect could change depending on the OS and browser (in my case Windows and Chrome). I asked colleagues if they can reproduce that. Results on iOS and Chrome is usually the same but on Safari and FF is even worse.

https://codepen.io/ThiefSoul/pen/OJyGGPa

[XiongLiding]

It seems the button's width is determined by text in it, so width will be something like 86.265625.
Then put the button in a flex-box with justify-content: space-around, the left will be 83.109375.

In chrome (my be also in other browsers), 83.109375 will render as 83, but value bigger than 83.5 will render as 84.
q-menu use some code in position-egine.js, always Math.floor() then value, cause the current situation we saw.

https://github.com/quasarframework/quasar/blob/921d59630544e2a9b9f8b4093230efc2c5a0d356/ui/src/utils/position-engine.js#L138-L143

[pdanpdan]

Can you please test:

• https://codepen.io/pdanpdan/pen/LYGbxpg
• https://codepen.io/pdanpdan/pen/QWyGdLE

This is with the fixed floor -> round.
I would need some checks on Firefox and Safari.

[rstoenescu]

Fix will be available in "quasar" v1.12.6.

[XiongLiding]

Seems still have problem in "retina display" or zoom page to 200%,
Browsers render button “round” to physical pixel, not logical one.

So maybe just don't fix the ugly original value, no floor, no round. Just leave it alone.

[pdanpdan]

Can you please compare the following and report the best option:

• https://codepen.io/pdanpdan/pen/LYGbxpg
• https://codepen.io/pdanpdan/pen/dyGNbOz

• https://codepen.io/pdanpdan/pen/QWyGdLE
• https://codepen.io/pdanpdan/pen/dyGNbWV

if you can please also report the OS/browsers tested

[Demivan]

Checked Android. Chrome and Firefox Preview both look better without rounding.
Firefox on Linux without rounding looks better too and stays aligned even when zooming.

[rstoenescu]

Upcoming 1.12.6 will have no rounding. From our tests we concluded the same. Thanks for helping out!