(I'm wondering what the official name for the bar located at the bottom edge of iPhone X and iPad Pro (2018 and newer) devices is. I've searched all possible variations like "ipad pro task switcher bar" and "ipad pro 2018 home bar" but couldn't find any official information on Apple's website - it's frustrating not to know the name of such a crucial UI element!)
https://i.sstatic.net/fPtZs.png
However, my main question is:
Does WebKit provide any means for web pages to automatically adjust their margins/padding to accommodate this task switcher bar?
I am aware of WebKit's @-webkit-viewport feature, as well as the
<meta name="viewport" content="viewport-fit=cover" />In my specific scenario, I have an image editor component in my application (loaded into a borderless <iframe> with height: 100vh; width: 100vw;) with buttons along the bottom of the viewport that are difficult to access on an iPad Pro due to the white bar. Here's a visual example:
https://i.sstatic.net/zQXpw.jpg
The temporary solution is to add some fixed padding at the bottom of the page to push the buttons up slightly, but this isn't sustainable and won't translate well to other devices - resulting in awkward spacing on desktops and various other devices.