Guideline 4.0

Guideline 4.0 - Design: Content Clipped by Notch or Safe Area

Low RiskEasyTypical Fix: 2-4 hours0 Reports
Also known as:Text or buttons hidden behind the notch or Dynamic IslandBottom navigation overlaps with the home indicator barContent clipped by rounded screen corners on newer iPhonesStatus bar content obscured on devices with the notchFixed-position elements do not respect safe area insets on different device models

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

01

**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.


02

**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)

```

03

**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.


04

**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.


05

**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 */ }

}

```

06

**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.


07

**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

From:Apple App Review Team
Subject:Guideline 4.0 - Design: Content Clipped by Notch or Safe
We noticed an issue in your app that contributes to a lower quality user experience than Apple users expect: - Content is clipped by the sensor housing or screen corners. Specifically, text and buttons at the top of the main screen are obscured by the Dynamic Island on iPhone 15 Pro, and bottom navigation buttons overlap with the home indicator. Next Steps: Please revise your app to ensure all content is displayed within the safe area and resubmit.

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.

Generate Appeal

Before & After

Before — Rejected

// 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()

After — Approved

// 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.

Before — Rejected

// 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),

])

After — Approved

// 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

View all Guideline 4 rejections