Как решить вопрос о положении: исправлена ​​кнопка внизу экрана в iOS (ipad / iphone)?

Question

У меня есть кнопка внизу экрана.Вот стили CSS для моей кнопки:

.bottomfixed {
    width: 92%;
    display: block;
    height: 68px;
    border-radius: 6px;
    background-color: #f27d00;
    font-family: Helvetica-Bold, Arial;
    border: solid 0;
    outline: solid 12px #fff;
    font-size: 24px;
    color: #fff;
    margin: 0% 4% 0% 4%;
    position: fixed;
    bottom: 10px;
    left: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

Как вы можете видеть, я установил положение: исправлено для кнопки, но оно не работает в iOS (iPhone и iPad)

У меня также есть поле ввода.когда я фокусируюсь на этом поле ввода, то в iPhone и iPad открывается виртуальная клавиатура, и из-за этой кнопки клавиатура перекрывается, и фиксированное положение кнопки игнорируется

Однако в других устройствах, таких как телефоны Android, это работает нормально.

Итак, как мне решить эту проблему с помощью CSS или javascript?(Примечание: мой язык программирования - PHP)

Answer 1

Попробуйте:

.bottomfixed 
{
   position:absolute;
   top:calc(100vh - (68px + 10px));
  /* 100 viewport height minus the height of the button and the height of the bottom position */
}

вместо этого:

.bottomfixed 
{
   position: fixed;
}

Положение зафиксировано, но не: https://codepen.io/carolmckayau/pen/qJXvGZ