Button text moves down more than button itself on clicked state

[D3SOX]

What package has an issue

@mantine/core

Describe the bug

When clicking the button, the text moves down more than the button itself.

Behavior in Firefox:

https://user-images.githubusercontent.com/24937357/154369842-88f4d9aa-3a63-4865-8119-da9292c02898.mp4

Behavior in Brave:

https://user-images.githubusercontent.com/24937357/154369962-3b9aaf4f-84da-4a50-bd4a-225943adf880.mp4

See my post down below for a better comparison video.

I couldn't reproduce it in CodeSandbox because the font was not correctly imported

In which browser did the problem occur

Firefox

If possible, please include a link to a codesandbox with the reproduced problem

https://github.com/D3SOX/mantine-button-firefox-bug

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

No

Possible fix

No response

[rtivital]

Button has translateY(1px) in active state, that is expected, if you do not want that behavior you can disable it with sx prop or using create styles

[D3SOX]

But why does it behave differently in Chromium and Firefox? Did you look at the videos or ran the reprod? I still think that's a bug.

[rtivital]

Could not see anything of videos, they are too small, I've tested it on FIrefox on mac and it works fine

[D3SOX]

Did you compare the behavor with a Chromium based browser? It only happens with the top button and is definitely noticable for me. I'm on Linux though. I'll have to double-check if it also happens without extensions.

I can record the videos again with bigger buttons later.

[D3SOX]

Another note: I can't see it when I zoom in and when I remove the height: '100%' from the Group

[D3SOX]

Here you should see it. Clean Firefox profile and a private window on both so there are no extensions

https://user-images.githubusercontent.com/24937357/154422304-72dde523-3b2b-4422-96c0-48bfbf17958b.mp4

[rtivital]

Okay, I'll have a look

[D3SOX]

I sat on it for 2 hours yesterday already until I noticed it was correct in Chromium and not in Firefox. I think it has something to do with relative units because it is more noticeable with some fonts than others.

[RamonEspinosa]

I was able to reproduce this issue yesterday. This is the code i used:

import { Button, MantineProvider } from "@mantine/core";

const App = () => (
  // The text only moves down when withGlobalStyles={true}
  <MantineProvider withGlobalStyles>
    <div
      style={{
        // The bug happens when the container has a border and a height
        borderBottom: "1px solid #2C2E33",
        height: "60px",
        // The bug happens in a flex container that centers the content
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <Button>Not OK</Button>
    </div>
    <Button>OK</Button>
  </MantineProvider>
);

export default App;

I also noticed that when using justify-content: center in the container, the button seems to also move a bit on the X axis (even though the rule only says transform: translateY(1px)). The issue is easier to notice by overriding the transform rule (setting it to transform: translateY(0)) when the button is active.

https://user-images.githubusercontent.com/47266830/154552078-95fa569a-00f3-43b2-9061-f6443d0cafcc.mp4

[D3SOX]

@RamonEspinosa Thank you for your investigations :wink:

[rtivital]

No longer reproducible in codesandbox with withNormalizeCSS prop on MantineProvider – https://codesandbox.io/s/fragrant-dawn-h1i2jh?file=/src/App.tsx

[D3SOX]

Can confirm :tada: