How to solve the issue of position:fixed for a button at the bottom of the screen in iOS (ipad/iphone)?

Question

I have a button at the bottom of the screen. here is the CSS styles for my button:

.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;
}

As you can see I have set position:fixed for the button but it doesn't work in iOS (iPhone and iPad)

I also have input box as well. when I focus on this input box then virtual keyboard is opening in iPhone and iPad and because of this button is overlapped by keyboard and fixed position of the button is ignored

However this is working fine in other devices like android phones.

So How can I solve this issue with the use of CSS or javascript? (Note:My programming language is PHP)

Answer 1

Try this:

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

instead of this:

.bottomfixed 
{
   position: fixed;
}

Position fixed but not: https://codepen.io/carolmckayau/pen/qJXvGZ