Safe AreaとナビゲーションバーおよびツールバーとUIScrollView

iPhone Xの登場と共にレイアウトの基準がSafe Areaへと変わりました。
Safe AreaについてはAppleのドキュメントをどうぞ。
[Update your apps for iPhone X.](https://developer.apple.com/ios/update-apps-for-iphone-x/)
[Positioning Content Relative to the Safe Area](https://developer.apple.com/documentation/uikit/uiview/positioning_content_relative_to_the_safe_area)

その為、１番上のルートビューはなんでもかんでもSafe Areaに対してレイアウト設定すれば良いと阿呆な自分は思っていました。
ナビゲーションバーとツールバーがある画面でSafe Areaに対してUIScrollViewを上下左右ともにSpace=0として設定しました。（環境はXcode9.2）
<img width="441" alt="top_safearea.png" src="https://qiita-image-store.s3.amazonaws.com/0/16070/46e43d5a-5e15-cf7f-2609-67a173761cf9.png">

iOS11.2のシミュレータでビルドするとこんな感じです。一見問題無いように見えます。
iPhone X 11.2とiPhone SE 11.2
<img width="545" alt="iOS11.2_iPhoneX_safearea.png" src="https://qiita-image-store.s3.amazonaws.com/0/16070/e24d77ab-9531-1057-d28a-302c7e46580e.png">　<img width="320" alt="iOS11.2_iPhoneSE_safearea.png" src="https://qiita-image-store.s3.amazonaws.com/0/16070/2c632e59-b731-6946-13ed-3b1f54aa05e5.png">

これをiOS10.3のシミュレータでビルドすると、UIScrollViewの上下に変なスペースが出来ます。
iPhone SE 10.3
<img width="320" alt="iOS10.3_iPhoneSE_safearea_top.png" src="https://qiita-image-store.s3.amazonaws.com/0/16070/77e4c7ee-b6a6-78b0-7b9f-109a1ed1c6ed.png"> <img width="320" alt="iOS10.3_iPhoneSE_safearea_bottom.png" src="https://qiita-image-store.s3.amazonaws.com/0/16070/db03640e-170b-dd24-5d12-af755c093940.png">

<br />
Safe Areaのバグか？とすぐ人のせいにしてしまいますが、よくよく上記の画像を見るとナビゲーションバーやツールバーが真っ白で、ビューが下に入り込んで無いようです。(iOS7のころのを思い出します）
そこでUIScrollViewの上下のスペースをSafe AreaにではなくSuperviewに対してSpace=0で設定します。

![top_superview.png](https://qiita-image-store.s3.amazonaws.com/0/16070/993ad65e-4208-2e7c-3b9c-7631028b4e5c.png)


すでにXcode上でナビゲーションバーとツールバーに色が透過しているのがわかります。ビルドしてみます。
iPhone X 11.2とiPhone SE 11.2
<img width="545" alt="iOS11.2_iPhoneX_superview.png" src="https://qiita-image-store.s3.amazonaws.com/0/16070/2d680497-67c3-2e3b-77e1-6f2bf925938a.png">　<img width="320" alt="iOS11.2_iPhoneSE_superview.png" src="https://qiita-image-store.s3.amazonaws.com/0/16070/9e4001a8-969f-b4d8-81ea-e60c3ac5c2f2.png">

iPhone SE 10.3
<img width="320" alt="iOS10.3_iPhoneSE_superview_top.png" src="https://qiita-image-store.s3.amazonaws.com/0/16070/480f77d6-30de-adee-9e91-03d6154debdf.png">　<img width="320" alt="iOS10.3_iPhoneSE_superview_bottom.png" src="https://qiita-image-store.s3.amazonaws.com/0/16070/4ce2f97d-5e9e-33b1-ddb4-e21aa28e7820.png">

<br />
今度は大丈夫そうです。ちゃんとナビゲーションバーとツールバーの下に入り込んでいて問題ありません。
iOS10.3でも上下に変なスペースが出来なくなりました。

よく考えたら当たり前なのですが、ちょっと引っかかってしまったので記事にしてみました。
ちなみに、ナビゲーションバーやツールバーが無い場合はSuperviewではなくSafe Areaに対して設定しないとiPhone XのSafe Areaを見事に突破しますので、Safe Area外にパーツが配置されてしまうようなアプリではちゃんとSafe Areaに対して設定しましょう。（左: Superviewへ上下レイアウト, 右: Safe Areaへ上下レイアウト）
また、UIScrollView(またはそれを継承しているUITableViewなど）を使用しない場合は、ナビゲーションバーやツールバーがあってもSafe Areaへ対してのレイアウトで問題無いと思います。
<img width="436" alt="no_bar_iPhone X_superview.png" src="https://qiita-image-store.s3.amazonaws.com/0/16070/d88a6fcd-81bd-79db-9ca7-39bc4223cd59.png"> <img width="436" alt="no_bar_iPhone X_safearea.png" src="https://qiita-image-store.s3.amazonaws.com/0/16070/74c138d1-2584-863b-1270-7d532645fee9.png">



※とあるアプリはSafe Areaを突破しステータスバーのアイコン部分に見事にボタンが重なり押すのがかなり困難状況になっていましたが普通にリリースされていたのでAppleのiPhone XのSafe Areaに対する審査は結構ザルなようです。