LinearProgress displays false 1% when value is 0 in a column stack with multiple LinearProgresses

[serhiisezonchyk]

https://codesandbox.io/p/devbox/optimistic-nobel-pvzh4n?file=%2Fsrc%2FApp.js

Steps to reproduce

Steps:

1. Place multiple LinearProgress components inside a flex container with limited width.
2. Do not provide a value prop (or explicitly set value = 0).
3. Observe that some progress bars incorrectly display a small filled portion (~1%) instead of being empty.
4. If everything looks correct initially, try changing the screen size and observe if the issue appears.

Current behavior

Some progress bars incorrectly display a small filled portion (~1%) despite having value = 0, and the issue may appear or disappear when resizing the screen.

Expected behavior

When value = 0, all progress bars should be completely empty regardless of screen size.

Context

The LinearProgress component, when used inside a flex container alongside multiple other LinearProgress components, sometimes incorrectly displays a small filled portion (~1%) even when value = 0. This issue occurs when the container has a restricted width and can be observed inconsistently across different screen sizes.

Code for playground:

export default function SectionProgress({ sections, progress }) {
  const sectionElements = [];
  for (let i = 0; i < sections; i++) {
    sectionElements.push(
      <LinearProgress
        key={`section-${i}`}
        variant='determinate'
        value={0}
        sx={{
          flex:1,
          height: 4,
        }}
      />
    );
  }
  return (
    <Card sx={{ minWidth: 275 }}>
      <Stack
        sx={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          gap: '4px',
          padding: '8px',
        }}
      >
        <Typography>Progress</Typography>
        <Stack direction='row' spacing={0.3} width='100%'>
          {sectionElements}
        </Stack>
      </Stack>
    </Card>
  );
}

Your environment

Browsers: Chrome, Firefox, Safari

Search keywords: LinearProgress, false 1%

[mj12albert]

@serhiisezonchyk Would you mind providing a minimal repro? You can fork this sandbox: https://codesandbox.io/p/sandbox/autumn-pond-v29s74

[serhiisezonchyk]

@mj12albert yeah, sure https://codesandbox.io/p/devbox/optimistic-nobel-pvzh4n?workspaceId=ws_Y8BqetBN1pjzbvsAXAu2eJ

[siriwatknp]

I can notice the issue when zoom in. I think it's the browser pixel issue because the stylesheet looks correct.

Maybe we could open a workaround fix to use translateY(-101%) to avoid the pixel issue.
I'd wait for upvotes first.