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:

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?

Solution

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.