Skip to content

Anti-aliasing issue causing progress bar to look bad when background color is white #48

@rsml

Description

@rsml

Describe the bug
There is (what looks to be) an anti-aliasing issue causing a sliver of the foreground color to be visible in places where it shouldn't be

To Reproduce
This happens for any width and size. Here's the props I used in this screenshot. Make sure that background color is white (otherwise it's too hard to see)

<AnimatedProgressWheel
        size={400}
        width={40}
        color="#56D719"
        progress={20}
        rotation="270deg"
        backgroundColor="#FFFFFF"
        duration={300}
        rounded
>
    ....
</AnimatedProgressWheel>

Expected behavior
No sliver of foreground color should appear on areas where it's not expected

Screenshots
Screenshot 2024-11-09 at 11 23 07
(Notice in the top left quadrant of the image, there's a green sliver in the inside curve of where the progress bar would be.

Desktop (please complete the following information):
N/A (not tested)

Smartphone (please complete the following information):

  • React Native v0.74.5
  • iOS 18.1
  • Both debug and release. Both simulator and device.

Additional context
N/A

Thanks for this great component!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions