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

**Guideline:** 4.0 · **Store:** Apple App Store · **Risk:** low · **Difficulty:** easy · **Typical turnaround:** 2-4 hours

Canonical URL: https://appstorereject.com/rejections/apple/4/guideline-40-design-content-clipped-by-notch-or-safe-area

## Description

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.

## Common variations

- Text or buttons hidden behind the notch or Dynamic Island
- Bottom navigation overlaps with the home indicator bar
- Content clipped by rounded screen corners on newer iPhones
- Status bar content obscured on devices with the notch
- Fixed-position elements do not respect safe area insets on different device models

## Example rejection email

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

## Resolution steps

## How to Fix Content Clipped by Notch or Safe Area

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

2. **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)
   ```

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

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

5. **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 */ }
   }
   ```

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

7. **Check scroll views** — Ensure `UIScrollView` content insets include safe area, or in SwiftUI, that `ScrollView` content is not obscured at the top or bottom.

## Appeal guidance

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 examples

**Before:** // 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:** // 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
}
**Why it works:** 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:** // 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:** // 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
    ),
])
**Why it works:** 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.

## Common questions

**Can you appeal a 4.0 rejection?**

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.

**How long does this typically take to fix?**

Typical turnaround is 2-4 hours (difficulty: easy). After resubmission, most re-reviews complete within 24-48 hours.

---
*Machine-readable source: https://api.appstorereject.com/api/rejections/detail?slug=guideline-40-design-content-clipped-by-notch-or-safe-area*