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:
While for other iPhone models and sizes the view is correctly displayed above the toolbar:
Here are the constraints I've added:
Could someone kindly explain me what should I do?
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.
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.
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.
I've solved the issue by selecting "Extend edges under Opaque Bars" for the UIViewController in question:
With option enabled:
With option disabled:
The other option is to use a translucent toolbar as @Silmaril has mentioned in another answer to the question.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With