iPhone X - Safe Area does not achieve full-screen experience?

Question

The new HIG for iPhone X available here, specify: "Provide a full-screen experience. Make sure backgrounds extend to the edges of the display, and that vertically scrollable layouts, like tables and collections, continue all the way to the bottom."

Now I'd like to understand how to accomplish that with Xcode 9 GM, since it seems to me that the only view allowed to extend to the whole screen is the UIViewController root view, and that whenever I try to drag constraints for a view above that, i.e. WKWebView to the root view, the constraints get actually connected to the safe area, leaving both the top and bottom areas empty as displayed in the storyboard here:

Please note the answer here specifies to use the safe area, but that doesn't work because using it results in the following simulator result where WKWebView is NOT extending to the edges of the screen:

I would never ask this as a legit question because of the down votes it would get... Does anyone know how to disable the auto-checking of "Safe Area Relative Margins"? I handle them properly in very custom apps, and am tired of always unchecking this poorly impl'ed "feature" :-) — eric, Apr 02 '18 at 18:13

score 15 · Answer 1 · edited May 16 '18 at 15:21

15

Just change your bottom constraint First Item to SuperView

edited May 16 '18 at 15:21

DoesData

6,594
3
39
62

answered Sep 21 '17 at 06:58

Nobel

170
5

Actually I tried this, but the html does not get displayed. – Fabrizio Prosperi Sep 22 '17 at 11:10
1

Thank you so much. I have been looking for this for awhile. – Rmalmoe Oct 04 '18 at 20:24
What about `UITableViewController`? – Kampai Oct 08 '18 at 10:42

score 7 · Accepted Answer · answered Sep 18 '17 at 10:20

7

Actually I believe the answer is this: to accomplish full screen we should NOT use safe area support. After I unchecked Safe Area Relative Margins and Safe Area Layout Guide on the view in Interface Builder Size Inspector I got the expected result:

In fact I would say that the idea of Safe Area is that of an area which will for sure not be overlapped by any of the system icons, or rounded borders, full screen is the opposite of it.

answered Sep 18 '17 at 10:20

Fabrizio Prosperi

1,398
4
18
32

I'm guessing *"safe area"* means an area in which nothing but your content is displayed. Hence, this new "home slider" does not belong to the safe area and has its own part of the screen. – LinusGeffarth Sep 18 '17 at 11:57
3

I don't think this is the correct answer. In the example, if you scroll all the way to the bottom, the content will not be clear of the home indicator. – SeanR Dec 05 '17 at 23:38
Safe Area is training wheels. I see that, for an experienced developer (with good ux chops), it just gets in the way. Thoughts on how to disable that checkbox automattically checking as true in XCode? – eric Apr 02 '18 at 18:16

score 0 · Answer 3 · answered Jul 20 '20 at 20:52

This answer is simple and worked for me .. follow these sequences:

1- select the background image and open constraints window

2- uncheck constrain to margins

3- as in picture : select (View) not (safe area) from the small arrow in the corner of edit value rectangle .. apply this for all 4 values

4 - enter value 0 for all 4 values and hit Enter

and Done

score 0 · Answer 4 · answered Sep 20 '20 at 17:57

0

I solved problem by setting top and bottom like this. xcode version is 11.6

answered Sep 20 '20 at 17:57

tvankith

323
1
5
20

iPhone X - Safe Area does not achieve full-screen experience?

4 Answers4

Linked