How can I make room for the 2018/2020+ iPad Pro's iOS "home-screen-bar" / "swipe-up-bar" in Safari/WebKit?

Question

(My initial question is to ask what the official name is for the bar on the bottom edge of iPhone X and iPad Pro (2018 and later) devices? I've googled all variations of "ipad pro task switcher bar" "ipad pro 2018 home bar" etc and I can't find any official documents on Apple's website about it - it's maddening not to know the name of the most important UI component on a device!)

But my real question is:

Does WebKit expose any way for web-pages to automatically have their margins/padding adjusted to accounts for this task-switcher-bar?

I know that WebKit has the @-webkit-viewport feature, and has <meta name="viewport" content="viewport-fit=cover" />, but I understand that's for resizing the viewport to account for the iPhone X's "notch" and doing the same other Android devices that also feature display cut-outs - I can't find any mention on Apple's Safari Developer website about how this feature can be used for the iPad Pro's white bar.

In my case, my problem is an image editor component that's used in my application (which I load into an borderless <iframe> with height: 100vh; width: 100vw;) has buttons that run along the bottom edge of the viewport which are harder to use on an iPad Pro because of the white bar. Here's a photo:

The quick-fix is to add some fixed padding to the bottom of the page to force the buttons up somewhat, but this isn't a long-term solution and won't work for other devices - and it'll mean the UI will have weird spacing on desktops and other devices.

Answer 1

In your CSS use safe-area-inset-bottom to preserve space for the bar.

Eg: margin-bottom: env(safe-area-inset-bottom)