iOS Safari css position fixed when textarea is focused

问题

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:

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?

回答1:

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: