The bottom addressbar can be cleared by using the env() setting. You can add more padding to the bottom to make sure everything clears the addressbar. padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px) env(safe-area-inset-bottom, 20px) env(safe-area-inset-left, 20px) ; The behavior isn't very consistent from what i've seen but this should help you out.