3

I have a simple html page long enough that the user requires to scroll the page. I want at the bottom of the page to have a div with postion:fixed and inside him a textarea. When a user clicks on the text area and the virtual keyboard appears I want the div position to stay at bottom , not in the middle of the page like in this pic: enter image description here

Here is the code I've used: https://jsfiddle.net/capz19yg/

    .inputFixed{
        position:fixed;
        bottom:0px;
        right:0px;
        width:100%;
        height:50px;
        background-color:lightgrey;
    }

    textarea{
        height:40px;
        width:300px;
        position:absolute;
        bottom:5px;
        right:10px;
        padding:0px;
        margin:0px;
        border:none;
    }


<div class="inputFixed">
    <textarea></textarea>
</div>

Is there a fix to this? maybe some javascript to make the correction?

Doua Beri
  • 9,236
  • 15
  • 78
  • 126
  • Possible duplicate of several SO questions. See https://gist.github.com/avesus/957889b4941239490c6c441adbe32398#gistcomment-2193547 for details. – Brian Cannard Sep 04 '17 at 23:34

1 Answers1

2

Maybe the problems is related to a well known bug in iOS Mobile Safari, that happens with scrolling / focus jumping and fixed positioning. Many people have written about it and many did hacks or changed their design to partially solve the issue.

As I reference, have a look at:

Community
  • 1
  • 1
christo
  • 466
  • 4
  • 14