Safe area not work properly on iPhone X when subviews are not in the view area

Question

I have a scrollView contains 2 child viewController. You can see VC2 not layout properly.

I found if view is not yet visible onscreen. safeAreaInsets is always 0.

I can call vc2.view.setNeedsLayout() to fix this problem when scroll ended. But the layout is not correct until scroll ended.

The document says

If the view is not currently installed in a view hierarchy, or is not yet visible onscreen, the edge insets in this property are 0.

So how can I fix this situation.

Autolayout

Answer 1

instead of referencing the current view's safeAreaInsets, set it to the UIApplication:

(UIApplication.shared.delegate?.window??.safeAreaInsets.bottom)

Answer 2

In your child view controllers if you set the view controllers additionalSafeAreaInsets equal to the window's safe area insets they will layout correctly respecting the safe areas.

I found I had to do this inside of viewDidLoad() and viewWillTransition(to size: CGSize, with coordinator: UIVIewControllerTransitionCoordinator

Inside of viewWillTransition you will want to set the additionalSafeAreaInsets in the animation block of the coordinator:

coordinator.animate(alongsideTransition: { _ in
    if #available(iOS 11.0, *) {
        self.additionalSafeAreaInsets = UIApplication.shared.delegate?.window??.safeAreaInsets
    }
}, completion: nil)