Out of the box, Safari displays existing websites content inset within the display’s safe area so it is not obscured by the rounded corners, or the device’s sensor housing.
The first new feature is an extension to the existing viewport meta tag called viewport-fit, which provides control over the insetting behavior.
The next step towards making our page usable again after adopting viewport-fit=cover is to selectively apply padding to elements that contain important content, in order to ensure that they are not obscured by the shape of the screen.
The portrait/landscape rotation issue of the left safe area can be solved using the brand-new CSS functions min() and max().