[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 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.
Read more >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...
Read more >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...
Read more >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....
Read more >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 ).
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Hey @montogeek are you still working on this? Or I can try to attempt a PR for it 😃
@montogeek No worries, will leave the PR to you then