uiView misaligning inside ViewController for iOS10, but not iOS11

Question

I recently started using Swift and Xcode and I'm not sure why the bottom constraint for the main view in my viewcontroller is shifted up for iOS 10 devices, whereas it works correctly on iOS11. I've had something similar to another application where the top view constraint was shifted down for iOS10 but I managed to fix it by overriding viewDidLayoutSubviews() and resetting constraints for devices lower than 11.

Unfortunately, the trick doesn't seem to work this time. If I override the bottom constraint, the bottom anchor is corrected but the top one gets pulled up and part of the view gets hidden by the navigation bar. I've been trying to find a solution via previous questions (most of them were for the top gap and I haven't managed to modify them to work for the bottom gap I'm getting) and Google, but no luck.

I've attached a screenshot of the issue for clarity. iOS11 on the left, iOS10 on the right.

The override i've tried:

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
let margins = view.layoutMarginsGuide
        NSLayoutConstraint.activate([
            graphView.leadingAnchor.constraint(equalTo: margins.leadingAnchor),
            graphView.trailingAnchor.constraint(equalTo: margins.trailingAnchor)
            ])

    if #available(iOS 11, *) {
        // safe area constraints already set
    } else {
        let standardSpacing: CGFloat = 0.0
        NSLayoutConstraint.activate([
            contentView.bottomAnchor.constraint(equalTo: bottomLayoutGuide.bottomAnchor, constant: standardSpacing)])
    }

And the result:

Answer 1

You need to set these 4 constraints to your Main View