Artifact at top of Menu component when triggered on hover

[devklick]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.6.2

What package has an issue?

@mantine/core

What framework do you use?

Vite

In which browsers you can reproduce the issue?

Firefox

Describe the bug

The following JSX renders a simple Menu that reveals on hover

<Menu shadow="md" width={200} trigger="hover">
  <Menu.Target>
    <Button>Settings</Button>
  </Menu.Target>
  <Menu.Dropdown>
    <Menu.Item>Theme</Menu.Item>
  </Menu.Dropdown>
</Menu>

When displayed in Firefox, there's always a blue bar at the top of the revealed menu.

It disappears after clicking the Menu.Target (the settings button, in this case), and does not re-appear on subsequent hovers. However it re-appears on the next refresh.

This does not happen on Chrome.

Reproducable in CodeSandbox. Again, only happens in Firefox, not Chrome.

If possible, include a link to a codesandbox with a minimal reproduction

https://codesandbox.io/p/sandbox/mantine-react-template-forked-pqf9dm?file=%2Fsrc%2FApp.tsx%3A2%2C49

Possible fix

I havent been able to identify what's causing this

Self-service

• I would be willing to implement a fix for this issue

[rtivital]

Fixed in 7.1.1