Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[LinearProgress] Safari left side glitch when using border radius

See original GitHub issue

The issue is present in the latest release.
I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Left side of LinearProgress component decored with withStyles and border radius is glitching when the value changes.

Expected Behavior 🤔

Left side of LinearProgress component decored with withStyles and border radius should not glitch when the value changes.

Steps to Reproduce 🕹

Steps:

Reproduction: https://codesandbox.io/s/frosty-pond-69r43

Open the Codesandbox in Safari.
Pay close attention to the left side of the red Linear progress bar.
Every time the value is update the red bar becomes square then circular and so on.

Issue doesn’t happen in Chromium based browsers and Firefox.

Context 🔦

I need border radius in the bar and also change the colors of the root bar and the underlying bar.

Your Environment 🌎

Tech	Version
Material-UI	latest
React	latest
Browser	Safari Version 14.0 (15610.1.28.1.9, 15610)

Issue Analytics

State:
Created 3 years ago
Comments:6 (4 by maintainers)

Top GitHub Comments

1reaction

stranger26commented, Oct 28, 2020

Hey @montogeek are you still working on this? Or I can try to attempt a PR for it 😃

0reactions

stranger26commented, Oct 28, 2020

@montogeek No worries, will leave the PR to you then

Top Results From Across the Web

[LinearProgress] Safari left side glitch when using border radius

Current Behavior. Left side of LinearProgress component decored with withStyles and border radius is glitching when the value changes.

Webkit border-radius and overflow bug when using any ...

The problem is that the overflow seems to break on the bottom left and bottom right of the image. I have created a...

Border + border-radius = problems in Safari - CSS-Tricks

In this pen you see that the right side of the block element has an extra stripe. At least.. I do.. If you...

border-start-end-radius - CSS: Cascading Style Sheets | MDN

The border-start-end-radius CSS property defines a logical border ... This is a box with a top right rounded corner. ... Safari on iOS15....

CSS3 Border-radius (rounded corners) - CanIUse

Method of making the border corners round. Covers support for the shorthand border-radius as well as the long-hand properties (e.g. border-top-left-radius ).