如何修复iOS10安全区域和topLayoutGuide问题？

Question

我对安全区域有疑问。
我编写了代码，并在iOS 10.2和11.4的两个模拟器中进行了构建。
它显示了红色矩形区域的不同部分，如下图所示。
我怎么了？
谢谢

代码在这里：

class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?


    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {

        window = UIWindow(frame: UIScreen.main.bounds)
        window?.rootViewController = UINavigationController(rootViewController: ViewController())
        window?.makeKeyAndVisible()

        return true
    }
}

class ViewController: UIViewController {

    let tableView = UITableView()

    override func viewDidLoad() {
        super.viewDidLoad()

        self.title = "TITLE HERE"

        tableView.dataSource = self
        tableView.delegate = self

        self.view.addSubview(tableView)
        tableView.snp.makeConstraints { (make) in
            make.left.equalTo(10)
            make.top.equalTo(self.topLayoutGuide.snp.bottom)
            make.right.bottom.equalTo(-10)
        }

    }

}

extension ViewController: UITableViewDelegate, UITableViewDataSource {

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 20
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        let cell = UITableViewCell()
        cell.textLabel?.text = "\(indexPath) TEST"

        return cell
    }

}