Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iPhone X Safe Area Appears to be below Opaque Toolbar

I can't properly constrain a view on the iPhone X to be above the bottom opaque toolbar.

You can see here that the view constrained to the bottom of the Safe area is obscured by the toolbar:

iPhone X screenshot

While for other iPhone models and sizes the view is correctly displayed above the toolbar:

iPhone SE storyboard screenshot

Here are the constraints I've added:

Constraints

Could someone kindly explain me what should I do?

like image 355
Alexander Mayatsky Avatar asked Oct 12 '17 04:10

Alexander Mayatsky


People also ask

What is the safe area in iOS?

The safe area represents the portion of your screen that is unobscured by bars and other operating system based content. Safe area is pre-defined by iOS across all Apple devices and is present in Android devices as well.

What is safe area insets?

The safe-area-inset-* variables are four environment variables that define a rectangle by its top, right, bottom, and left insets from the edge of the viewport, which is safe to put content into without risking it being cut off by the shape of a non‑rectangular display.

What is Safearea Swift?

A safe area defines the area within a view that isn't covered by a navigation bar, tab bar, toolbar, or other views. SwiftUI views respect safe areas out of the box. But there are plenty of situations when you need to customize this behavior.


2 Answers

I've solved the issue by selecting "Extend edges under Opaque Bars" for the UIViewController in question:

With option enabled: IB extend edges ticked

With option disabled: IB extend edges unticked

The other option is to use a translucent toolbar as @Silmaril has mentioned in another answer to the question.

like image 164
Alexander Mayatsky Avatar answered Nov 15 '22 18:11

Alexander Mayatsky


This is definitely iOS bug.

Try use translucent toolbar because bug is not reproducible when toolbar is translucent.

Other option is to add toolbar directly on view controller

like image 45
Silmaril Avatar answered Nov 15 '22 16:11

Silmaril