Guideline 4.0
Guideline 4.0 - Design: Content Clipped by Notch or Safe Area
Our Take
Apple rejected your app because content is being clipped or hidden by the device’s notch, Dynamic Island, home indicator, or rounded screen corners. This happens when views extend into unsafe areas without proper insets, or when fixed-position elements overlap with system UI. Apple requires all interactive and important content to remain within the safe area, while background content can extend edge-to-edge.
Resolution Guide
**Use safe area insets** — In SwiftUI, content automatically respects safe areas. If you’ve used `.ignoresSafeArea()` or `.edgesIgnoringSafeArea()`, remove it from views that contain text or interactive elements. Only backgrounds and images should ignore safe areas.
**In UIKit, constrain to the safe area layout guide** — Replace constraints anchored to `view.topAnchor` with `view.safeAreaLayoutGuide.topAnchor`, and similarly for the bottom:
```swift
contentView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor)
contentView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
```
**Handle the Dynamic Island** — On iPhone 14 Pro and newer, the safe area at the top is larger than on notch devices. Test on both notch and Dynamic Island simulators to ensure nothing is obscured.
**Protect the home indicator area** — Ensure buttons and tappable content at the bottom of the screen sit above the home indicator. The safe area bottom inset handles this automatically if respected.
**Allow backgrounds to go edge-to-edge** — Background colors and images should extend behind the notch and home indicator for a polished look. In SwiftUI:
```swift
ZStack {
Color.blue.ignoresSafeArea() // background extends edge-to-edge
VStack { /* content stays in safe area */ }
}
```
**Test on all device sizes** — Simulators for iPhone SE (no notch), iPhone 14 (notch), iPhone 15 Pro (Dynamic Island), and iPhone 15 Plus (large Dynamic Island). Verify in both portrait and landscape.
**Check scroll views** — Ensure `UIScrollView` content insets include safe area, or in SwiftUI, that `ScrollView` content is not obscured at the top or bottom.
Example Rejection Email
Consider Appealing
Do not appeal this rejection. The fix is quick and clearly correct. If the issue only appears on one device model and you cannot reproduce it, reply in the Resolution Center asking which specific device and screen the reviewer observed the issue on.
Before & After
// Content ignores safe area — clipped by notch and home indicator
VStack {
Text("Welcome Back")
.font(.largeTitle)
Spacer()
Button("Continue") { next() }
.frame(maxWidth: .infinity)
.padding()
.background(Color.blue)
}
.ignoresSafeArea()
// Background extends edge-to-edge, content respects safe area
ZStack {
Color(.systemBackground)
.ignoresSafeArea() // only the background ignores safe area
VStack {
Text("Welcome Back")
.font(.largeTitle)
Spacer()
Button("Continue") { next() }
.frame(maxWidth: .infinity)
.padding()
.background(Color.blue)
.clipShape(RoundedRectangle(cornerRadius: 12))
.padding(.horizontal)
}
.padding(.vertical) // extra breathing room
}
What changed: Move .ignoresSafeArea() to only the background layer. The VStack content automatically respects safe area insets, keeping text clear of the notch and the button above the home indicator.
// UIKit: constraints pinned to view edges, ignoring safe area
NSLayoutConstraint.activate([
label.topAnchor.constraint(equalTo: view.topAnchor, constant: 20),
button.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -20),
])
// UIKit: constraints pinned to safe area layout guide
NSLayoutConstraint.activate([
label.topAnchor.constraint(
equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20
),
button.bottomAnchor.constraint(
equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -20
),
])
What changed: Anchoring to safeAreaLayoutGuide instead of the view edges ensures content is offset by the correct amount for each device’s notch, Dynamic Island, or home indicator.
Community Solutions · 0
Sign in to share your solution.
More Guideline 4 (Design) rejections
- Guideline 4.0 - Design: App Does Not Include iOS Features
- Guideline 4.0 - Design: App Looks Like a Website
- Guideline 4.0 - Design: Apple Pay Button Not Following Guidelines
- Guideline 4.0 - Design: Blurry Icons or Low-Resolution Assets
- Guideline 4.0 - Design: Broken Layout on iPad
- Guideline 4.0 - Design: Crowded or Poor Layout