Handle safe area insets as asymmetric — never double one side

Apple calls this out directly: on iPhone Duo, safe areas and layout margins are asymmetric, and each side must be handled independently.

Why it happens

On every previous iPhone, the left and right safe area insets were mirror images. In portrait they were both zero; in landscape the notch produced an equal inset on each side. A shortcut like bounds.width - insets.left * 2 was wrong in principle but right in practice, so it survived code review for years.

iPhone Duo breaks the symmetry. The status bar and camera sit asymmetrically on the inner display, and the hinge introduces geometry that has no mirror. Doubling one inset now over- or under-counts by the difference between the two sides.

The fix

Inset the rectangle and read its width, rather than doing arithmetic on one side:

// Before — assumes left and right insets are equal
let width = view.bounds.width - view.safeAreaInsets.left * 2

// After — each side accounted for independently
let width = view.bounds.inset(by: view.safeAreaInsets).width

The same rule applies when you position content:

// Foreground, interactive content stays inside the safe area
foreground.frame = view.bounds.inset(by: view.safeAreaInsets)

In SwiftUI the safe area is respected by default, so the common failure is code that opts out and then re-adds padding by hand. If you find .ignoresSafeArea() followed by manual .padding(), that padding is almost certainly a symmetric assumption in disguise. Read the real values instead:

GeometryReader { proxy in
    let insets = proxy.safeAreaInsets   // .leading and .trailing differ
    ContentView()
        .padding(.leading, insets.leading)
        .padding(.trailing, insets.trailing)
}

For web views and CSS-based UI, the equivalent is to use env(safe-area-inset-left) and env(safe-area-inset-right) separately rather than applying one value to both sides.

How to verify

In the Duo simulator, rotate the device on the inner display and compare the visual gap on the left and right edges of your content. They will differ; what matters is that your content is not clipped and does not drift off-centre as you rotate and fold.