Popover is misaligned on fractional pixels

[patorjk]

Steps to reproduce

Steps:

1. Open this link to live example: https://stackblitz.com/edit/github-tt94w8is?file=src%2FApp.tsx
   • Type in the textfield to see the popover, press "Esc" to hide it (also hides on blur).
2. You'll need to zoom to a different level to see the misalignment problem - usually 150% or 125%. See the screenshot below for what I'm referring to. The popover becomes misaligned when fractions of a pixel are at play, usually this occurs when zoomed in.
3. Type in the textfield and the popover will pop-up and be misaligned by a fraction of a pixel (side note: if you zoom with the popover it becomes misaligned, but this is not what I'm referring to).
4. It seems that MUI rounds the left and top positions (https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Popover/Popover.js#L279), thus fractional pixels sometimes cause misalignment. This leads to a "broken" effect when popovers are connecting to other UI elements.
   Example of the problem:
   

The popover is misaligned by a fraction of a pixel. I believe this is due to the rounding that occurs in the popover element.

Current behavior

Currently MUI round the top and left positions, thus the popover snaps to the pixel grid rather than being directly aligned with the element its supposed to align with.

Expected behavior

The popover should align with the element its suppose to align with, even if fractional pixels are at play.

Context

I'm creating a search suggestion component.

Your environment

npx @mui/envinfo

  System:
    OS: Linux 4.18 Red Hat Enterprise Linux 8.10 (Ootpa)
  Binaries:
    Node: 20.19.0 - ~/.nvm/versions/node/v20.19.0/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.19.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4 
    @emotion/styled: ^11.11.5 => 11.11.5 
    @mui/base: ^5.0.0-beta.48 => 5.0.0-beta.61 
    @mui/core-downloads-tracker:  6.1.6 
    @mui/icons-material: 6.1.6 => 6.1.6 
    @mui/lab: 6.0.0-beta.14 => 6.0.0-beta.14 
    @mui/material: 6.1.6 => 6.1.6 
    @mui/private-theming: ^5.15.14 => 5.15.14 
    @mui/styled-engine:  6.1.6 
    @mui/system: 6.1.6 => 6.1.6 
    @mui/types:  7.2.19 
    @mui/utils: 6.1.6 => 6.1.6 
    @mui/x-data-grid: ^7.14.0 => 7.16.0 
    @mui/x-date-pickers: ^7.22.1 => 7.22.1 
    @mui/x-internals:  7.15.0 
    @mui/x-tree-view:  7.15.0 
    @types/react:  18.3.3 
    react: ^18.1.0 => 18.2.0 
    react-dom: ^18.1.0 => 18.2.0 
    typescript:  4.9.5 

I'm using Chrome (Version 126.0.6478.182 (Official Build) (64-bit))

Search keywords: fractional, zoom

[DiegoAndai]

Hey @patorjk, thanks for the report. I can confirm the behavior, although it's not consistent on my machine, it sometimes will appear, and sometimes won't.

This is an advanced use case that requires more control over the popover style. Have you considered using our unstyled library Base UI: https://base-ui.com/react/components/popover? I think it suits your use case as it doesn't come with any styles, so you have complete control.

Please give it a try, and let me know how it goes. I'm asking this because this advanced use case is not what Material is optimized for. We need to make some decisions, looking at what most users would need (for example, rounding the position), so I'm not sure we can change that only for this use case. Does that make sense?

[patorjk]

So I tried out the base-ui popover, but I struggled with certain features like making it so the popover wouldn't auto focus (I'm still not sure how to do that). The docs list an initialFocus property, but I don't see where the possible values for InteractionType are defined.

I was able to make a version of my example above and the alignment issue seems to go away (though it had unrelated bugs due to the focus thing), however, even though this is a somewhat advanced use case, I think it would make sense for the MUI Popover not to round the values when inputted via the anchorPosition prop. I would have assumed that prop allowed for precise positioning.

[DiegoAndai]

The docs list an initialFocus property, but I don't see where the possible values for InteractionType are defined.

I think you should be able to set your input as the initialFocus, something like initialFocus={inputRef.current}.

even though this is a somewhat advanced use case, I think it would make sense for the MUI Popover not to round the values when inputted via the anchorPosition prop. I would have assumed that prop allowed for precise positioning.

I understand, I'll add the waiting for 👍🏼 label so the community can vote for this change. Anyone who needs this fix, please add an upvote (👍🏼 emoji) on this issue's description so we can track interest.

The reason I mention using Base UI is that this change might be picked up for development if it receives enough upvotes, but there is no certainty at the moment. So I don't want to have you waiting for something that might not be implemented soon, especially as I think this would be a breaking change, so it has to be released on a new major. I hope you understand.

If you decide to go with Base UI, feel free to ask me for help on this issue or open an issue on their repo. We appreciate all feedback!