I’m trying to make the bottom margin of a bottom bar dynamic to ensure that it respects the safe area of the device. As such, I’am using the ccs env(safe-area-inset-bottom) as bottom margin on the first container of my bottom nav.
But when I test it (on an iPhone), it does not seems to work.
Is env(safe-area-inset-bottom) usable with weweb ?
yeah same issue here. i’ve tried via custom css and custom code as well
Hello 
I’ve managed to use env(safe-area-inset-bottom) on PWA.
The issue was that the viewport meta tag is missing viewport-fit=cover attribute in order to use the variable. So I’ve added this script that is initialized on page load that adds it to the header.
// Workflow on page load
const document = wwLib.getFrontDocument();
function addViewportFit() {
let viewportMeta = document.querySelector('meta[name="viewport"]');
if (viewportMeta) {
if (!viewportMeta.content.includes("viewport-fit")) {
viewportMeta.content += ", viewport-fit=cover";
}
} else {
viewportMeta = document.createElement("meta");
viewportMeta.name = "viewport";
viewportMeta.content =
"width=device-width, initial-scale=1.0, viewport-fit=cover";
document.head.appendChild(viewportMeta);
}
}
if (document.head) {
addViewportFit();
} else {
document.addEventListener("DOMContentLoaded", addViewportFit);
}
And then, on the CSS props where i need to use the env(..), I bind it as a string. And that did the trick 
