Handle the safe area in Chrome browser on the iPhone X family

Question

For the website that I am managing, I am handling the iPhone X family screen safe area using the new safe-area-inset-<position> and this is working fine on Safari browser as you can see here:

With the following code:

/* white container for the home bar that has an height only on devices that read the safe area to cover the transparency around that bar */
.ctc-container {
    background: $white;
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    min-height: env(safe-area-inset-bottom);
    z-index: 100;
}

/* chat and phone number container are positioned at the bottom of the safe area (for devices that read it) or at the bottom of the page */
.ctc-box {
    position: absolute;
    bottom: 0;
    bottom: env(safe-area-inset-bottom);
}

Now the problem is on Chrome browser because apparently it is not handling the safe area yet, so the chat and phone number box is overlapped by the iPhone home bar.

Is there any CSS solution that can be applied for Chrome on iPhone X family devices to handle the safe area?

Answer 1

Have you added viewport-fit=cover to your meta[name="viewport"]?