QSelect cover mode within QDialog jumpy dropdown

[justinbeaty]

Describe the bug
I have a QSelect within a QDialog (I use the plugin, but the codepen below uses the component). When the QSelect has many options, the dropdown's position jumps around. You can see the bottom edge move around when hovering over some of the options in the select.

In my app, I had worse effects that I couldn't reproduce in the codepen, such as the list items also moving around, both horizontally and vertically. The issue appears in chrome, but not in firefox.

Codepen/jsFiddle/Codesandbox (required)
https://codepen.io/pianopronto/pen/JjREGWd

To Reproduce
Steps to reproduce the behavior:

1. Open dialog
2. Open QSelect
3. Hover around on items and see the bottom edge jump around

Expected behavior
The QSelect dropdown should not move.

Screenshots
If applicable, add screenshots to help explain your problem.

Platform (please complete the following information):
OS: Windows
Node: 14.13.1
NPM: 6.14.8
Yarn: 1.22.5
Browsers: Chrome Version 87.0.4280.88 (Official Build) (64-bit)
iOS: n/a
Android: n/a
Electron: n/a

Additional context
Changing src/utils/position-engine.js with the following fixes the issue for me. I am not sure if there's any implications for higher DPI screens for doing this.

export function getTargetProps (el) {
  return {
    top: 0,
    center: Math.round(el.offsetHeight / 2),
    bottom: el.offsetHeight,
    left: 0,
    middle: Math.round(el.offsetWidth / 2),
    right: el.offsetWidth
  }
}

Edit: Added exact chrome version

[justinbeaty]

Also, only the center: Math.round(el.offsetHeight / 2) is really needed, I noticed rounding middle caused the dropdown to not be exactly aligned with the QSelect.

Edit 2: Hm, I noticed position-engine.js has a pretty big PR to it open. Not sure if this bug will still be present with the changes.

[hawkeye64]

Verified. Every other item in the list, when hovered, is causing a picel height in growth to occur.

[pdanpdan]

@pianopronto
With the improved positioning it's fixed. You can test it if you want by replacing the quasar entry in package.json with
"quasar": "https://github.com/pdanpdan/quasar#quasar-pdan-v1.14.7-beta.4", and do a yarn

[justinbeaty]

@pdanpdan Confirmed your branch resolves the issue. Thanks!

[pdanpdan]

Well keep it open until it's fixed in an official release.