Для веб-сайта, которым я управляю, я обрабатываю безопасную область экрана семейства iPhone X, используя новый safe-area-inset-<position>, и это нормально работает в браузере Safari, как вы можете видеть здесь:
Со следующим кодом:
/* 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);
}
Теперь проблема в браузере Chrome, потому что, очевидно, он еще не обрабатывает безопасную область, поэтому окно чата и номера телефона перекрывается домашней панелью iPhone.
Есть ли какое-либо решение CSS, которое можно применить для Chrome на устройствах семейства iPhone X для обработки безопасной зоны?