# clipped() doesn't affect hit testing

DevFeed: [clipped() doesn't affect hit testing](<https://devfeed.tech/articles/clipped-doesn-t-affect-hit-testing-21711.md>)

Original publisher: [Read original article](<https://oleb.net/2022/clipped-hit-testing/>)

Author: Ole Begemann

Published: 2022-11-24T18:30:58Z

Content type: tutorial

Language: en

Sources: [Ole Begemann](<https://devfeed.tech/sources/ole-begemann.md>)

Topics: [SwiftUI](<https://devfeed.tech/topics/swiftui.md>), [iOS](<https://devfeed.tech/topics/ios.md>), [macOS](<https://devfeed.tech/topics/macos.md>), [ui](<https://devfeed.tech/topics/ui.md>)

Tags: [ios](<https://devfeed.tech/tags/ios.md>), [macos](<https://devfeed.tech/tags/macos.md>), [swiftui](<https://devfeed.tech/tags/swiftui.md>), [ui](<https://devfeed.tech/tags/ui.md>)

## AI overview

A SwiftUI tutorial explains that clipping a view with clipped() does not limit its hit-testing region. Using contentShape(Rectangle()) on the constrained frame limits hit testing to the visible area, allowing an obscured button to receive taps. The behavior was tested on iOS 16.1 and macOS 13.0.

## Source excerpt

The clipped() modifier in SwiftUI clips a view to its bounds, hiding any out-of-bounds content. But note that clipping doesn't affect hit testing; the clipped view can still receive taps/clicks outside the visible area. I tested this on iOS 16.1 and macOS 13.0. Example Here's a 300x300 square, which we then constrain to a 100x100 frame. I also added a border around the outer frame to visualize the views: Rectangle() .fill(.orange.gradient) .frame(width: 300, height: 300) // Set view to 100x100 -> renders out of bounds .frame(width: 100, height: 100) .border(.blue) SwiftUI views don't clip their content by default, hence the full 300x300 square remains visible. Notice the blue border that indicates the 100x100 outer frame: Now let's add .clipped() to clip the large square to the 100x100 frame. I also made the square tappable and added a button: VStack { Button("You can't tap me!") { buttonTapCount += 1 } .buttonStyle(.borderedProminent) Rectangle() .fill(.orange.gradient) .frame(width: 300, height: 300) .frame(width: 100, height: 100) .clipped() .onTapGesture { rectTapCount += 1 } } When you run this code, you'll discover that the button isn't tappable at all. This is because the (unclipped) square, despite not being fully visible, obscures the button and "steals" all taps. The dashed outline indicates the hit area of the orange square. The button isn't tappable because it's covered by the clipped view with respect to hit testing. The fix: .contentShape() The contentShape(_:) modifier defines the hit testing area for a view. By adding .contentShape(Rectangle()) to the 100x100 frame, we limit hit testing to that area, making the button tappable again: Rectangle() .fill(.orange.gradient) .frame(width: 300, height: 300) .frame(width: 100, height: 100) .contentShape(Rectangle()) .clipped() Note that the order of .contentShape(Rectangle()) and .clipped() could be swapped. The important thing is that contentShape is an (indirect) parent of the 100x100 frame modifier that de