Skip to content

[BUG] Corner Clipping Issue When Progress Width Is Less Than Height with .isRounded(true) #19

@PierreJanineh

Description

@PierreJanineh

When using .isRounded(true) with .setAnimationMaxValue(not nil) and a linear shape with a small progress value (but bigger than value of animationMaxValue), the progress bar’s corners get clipped incorrectly — especially when the width of the progress is smaller than its height. This causes the rounded ends to appear distorted or mismatched compared to the track.

Steps to Reproduce

  1. Create a ProgressUI with setShape(.linear(.zero))
  2. Use a small progress value (e.g. 0.01)
  3. Observe the corners of the progress not matching the track

Expected Behavior

The progress bar should maintain smooth, rounded corners consistent with the track, even at small values.

Workaround

Use .setAnimationMaxValue(_:) with a calculated value that draws a perfect circle until the progress width is large enough to form natural rounded corners. Example:

let height: CGFloat = 8

GeometryReader { geometry in
	ProgressUI(progress: entry.progress)
		.setShape(.linear(.zero))
		.setIsSpinner(false)
		.setProgressColor(Color.red)
		.setTrackColor(.yellow)
		.setAnimationMaxValue(height / geometry.size.width)
		.setInnerProgressWidth(.zero)
		.setTrackWidth(height)
}.frame(height: height)

Suggested Fix

Adjust how corner radius is applied when the progress width is smaller than the track height — possibly by clamping the corner radius to the current width/height or dynamically adjusting the shape to avoid visual clipping.

Metadata

Metadata

Assignees

Labels

bugSomething isn't workinggood first issueGood for newcomers

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions