skiptools / skiptools/skip-ui

.clipShape with RoundedRectangle can cause taps to be ignored...

Open
#151 0 comments 0 reactions 0 assignees View on GitHub

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:

  1. A very tall view (e.g. 3500 points tall) that you apply a .clipShape modifier to using RoundedRectangle to round the edges, and...

  2. A Button at 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:

  1. This still occurs even if the Button is contained within another view. So, it doesn't seem to matter if the clipped view is its direct parent.

  2. A Rectangle clip 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.