QSelect cover mode within QDialog jumpy dropdown

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

[pdanpdan]

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

[justinbeaty]

@pdanpdan Confirmed your branch resolves the issue. Thanks!