Problem: On the newer iPhone models (iPhone X, XS, XS Max, etc.), content gets cut off if you flip your phone to landscape mode due to the “notch”. Or in portrait mode, you need to leave some space for the thin white bar that allows users to swipe horizontally to move across apps.

Solution: Webkit team advocates use of safe area insets to get around this problem. Using these properties, Safari automatically detects these areas and adds an extra set of padding so that your content doesn’t get cut off. For example :

.account_page .container {        
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

Safe Area Insets Applied (Left) vs No Safe Area Insets (Right)