iPhone X Safe Area Appears to be below Opaque Toolbar

Question

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?

Answer 1

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.

Answer 2

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

Answer 3

use size to fit content ⌘ (+) =