react-component / react-component/progress
Line Component Rendering Incorrectly at Non-100% Zoom in Safari
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 706
- Forks
- 161
- Avg merge
- 3h 29m
- Merged PRs (30d)
- 2
Description
The Line component from rc-progress does not render correctly at non-100% zoom levels (mostly with less than 100%) in Safari.
Specifically:
When the browser zoom is set to 50%, the progress bar does not fill according to the percent value provided.
For example, if percent is 50%, the progress bar should be half-filled, but it shows random or incorrect filling.
This issue does not occur at 100% zoom.
Steps to Reproduce
Open Safari and set the browser zoom to 50%.
Use the Line component from rc-progress with a percent value (e.g., 50%).
Observe that the progress bar does not fill correctly according to the percent value.
Expected Behavior
The Line component should render the progress bar correctly at any zoom level, filling the bar according to the percent value provided.
Actual Behavior
At 50% zoom, the progress bar does not fill correctly. For example:
If percent is 50%, the progress bar may show random or incorrect filling.
If percent is 100%, the progress bar works correctly.
Relevant Screenshots:
For 100% zoom in safari:
For 50% zoom in Safari:
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the rc-progress Line component and reproduce the issue using the linked CodeSandbox in Safari at 50% and 100% zoom. Trace how the percent value determines the SVG progress rendering, then verify that intermediate values such as 50% fill correctly at non-100% zoom without changing the existing 100% behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100