search

mui / material-ui

Material UI: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
https://mui.com/material-ui/
MIT License
91.86k stars 31.57k forks source link

[material-ui][Grid] faulty wrapping on firefox if container has non-integer pixel width #42069

Open SCjona opened 2 weeks ago

SCjona commented 2 weeks ago

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/mui-bug2-8kcsfp

Steps:

  1. Resize window width on Firefox

Current behavior

Firefox:

https://github.com/mui/material-ui/assets/41996969/4c470c89-c208-4264-ba54-00cc33b2a18e

Expected behavior

Same as chromium:

https://github.com/mui/material-ui/assets/41996969/3849c26a-5e23-4b65-8ccc-a99a61c52fe4

Context

This only happens when the container has a decimal (non-integer) pixel width. If you remove the width attribute from the container in the demo it works fine.

Your environment

npx @mui/envinfo System: OS: macOS 14.4.1 Binaries: Node: 22.0.0 - /opt/homebrew/bin/node npm: 10.5.1 - /opt/homebrew/bin/npm pnpm: Not Found Browsers: Chrome: Not Found Edge: Not Found Safari: 17.4.1 Additional info: Firefox - 125.0.3 (64-bit) Chromium - Version 126.0.6450.0 (Developer Build) (arm64)

Search keywords: grid wrapping firefox