Sometimes we are facing an issue on the iPhone devices because of the Toolbar at the bottom of the screen.
If we have a sticky button at the bottom of the screen, for example, it’s difficult to click on that button through over iPhone X devices since the toolbar occupies some area of the screen.
In that case, we can fix it using Safe Area variants which are supported over iPhone X devices.
I am sharing a brief example and detailed reference below.
// general devices
padding-bottom: 16px;
// iPhone X device
padding-bottom: calc(16px + env(safe-area-inset-bottom));
Reference:
https://webkit.org/blog/7929/designing-websites-for-iphone-x/
