Mantine Menu Makes Scrollbar Appear/Disappear Quickly

[justurbo]

What package has an issue

@mantine/core

Describe the bug

Makes the scrollbar flash when refreshing the page. Content shifts.

Works as expected. Content doesn't shift. Browser scrollbar is not appearing/disappearing quickly.

I've tried the withinPortal flag without success. :(

In which browser did the problem occur

Chrome

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

No response

Do you know how to fix the issue

No response

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

No response

Possible fix

No response

[rtivital]

I do not see browser scrollbars on your screenshots.

[justurbo]

I do not see browser scrollbars on your screenshots.

I’ll record it once I get home

[justurbo]

Can no longer reproduce it. Could be a macOS or Chrome issue. This is the URL of the Mantine application that had the scrollbar appear/disappear on page switch/page refresh: https://bit.ly/3uN4EHa

[RaVeN-ShP]

This issue still seems to exist on both firefox and chromium (CEF) for me.

I've attached two gifs showing the issue. One for CEF and one for Firefox. The issue can be seen when switching to the "library" page.

Source code is roughly equivalent to:

<ScrollArea>
  <SimpleGrid
    <Menu control={Card} >
      <Menu.Label>Settings</Menu.Label>
    </Menu>
    <Menu control={Card} >
      <Menu.Label>Settings</Menu.Label>
    </Menu>
    <Menu control={Card} >
      <Menu.Label>Settings</Menu.Label>
    </Menu>
     more menu items....
  </SimpleGrid>
</ScrollArea>

[RaVeN-ShP]

Seems like it's somehow related to React.StrictMode. The problem disappears after disabling it!

[rtivital]

Strict mode issue: not affecting production, disable strict mode to not have this issue in development.