.clipShape with RoundedRectangle can cause taps to be ignored...
Nobody has claimed this yet.
- Dominant language
- Swift
- Stars
- 330
- Forks
- 76
- Avg merge
- 3h 6m
- Merged PRs (30d)
- 1
Description
This is an odd one.
If you have:
-
A very tall view (e.g. 3500 points tall) that you apply a
.clipShapemodifier to usingRoundedRectangleto round the edges, and... -
A
Buttonat a certain point is aded near the bottom of that view.
...that Button will not be tappable. It seems that .clipShape somehow eats those touches.
A couple of notes:
-
This still occurs even if the
Buttonis contained within another view. So, it doesn't seem to matter if the clipped view is its direct parent. -
A
Rectangleclip shape seems to be fine.
This probably seems like quite a bit of an edge case, but there are some lengthy screens in mainstream apps that could contain elements that need to have large rounded elements. I can probably find a workaround for this, but I thought it worth noting as it could relate to an underlying problem with how clip shapes are handled.
In a fresh app, replacing WelcomeView with the following will demonstrate this:
struct WelcomeView : View {
@State var heartBeating = false
@Environment(ViewModel.self) var viewModel: ViewModel
var body: some View {
@Bindable var viewModel = viewModel
let testHeight = 3500.0 // DOESN'T WORK if ~3500 or greater!
ScrollView {
VStack(spacing: 8.0) {
Rectangle().fill(Color.blue).frame(width: 100.0, height: testHeight)
VStack {
Button {
print("Test")
} label: {
Rectangle().fill(Color.gray).frame(width: 100.0, height: 100.0)
}
}
}
.padding()
.background(Color(.displayP3, red: 0.1, green: 0.1, blue: 0.1))
.clipShape(RoundedRectangle(cornerRadius: 10.0)) // DOESN'T WORK!
// .clipShape(Rectangle()) // WORKS!
}
}
}
Contributor guide
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
Reproduce the issue in a fresh app by replacing WelcomeView with the example and varying testHeight around 3500 points. Compare the RoundedRectangle and Rectangle clip shapes in the ScrollView, then verify that the Button near the bottom remains tappable with the rounded clip shape. Done means the reported touch behavior is corrected without losing the clipping behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- swift
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100