固定文本区域时，iOS Safari CSS位置已修复 [英] iOS Safari css position fixed when textarea is focused

问题描述

我有一个足够长的简单html页面，用户需要滚动它。我想在页面底部设置一个div，其位置为postfix：fixed，并且在他的内部为textarea。
当用户单击文本区域并且出现虚拟键盘时，我希望div位置保持在底部，而不是在此图片的页面中间，如下图所示：

  .inputFixed {
 position：fixed; 
 bottom：0px; 
右：0px； 
宽度：100％； 
高度：50像素； 
 background-color：lightgrey; 
} 
 
 textarea {
 height：40px; 
 width：300px; 
头寸：绝对； 
 bottom：5px; 
 right：10px; 
 padding：0px; 
保证金：0px; 
 border：none; 
} 
 
 
< div class = inputFixed> 
< textarea>< / textarea> 
< / div> 
  

对此是否有解决方法？

解决方案

也许该问题与iOS Mobile Safari中一个众所周知的错误有关，这种情况会发生滚动/焦点跳跃和固定位置。很多人都写过这篇文章，很多人也做了hack或更改了设计以部分解决问题。

我参考一下，看看：

• 堆栈溢出：固定元素获得焦点时，ios8中的Safari正在滚动屏幕


• 位置固定的问题&在iOS上滚动


• 移动Safari（为什么？！）

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?

解决方案

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:

• Stackoverflow: Safari in ios8 is scrolling screen when fixed elements get focus
• Issues with position fixed & scrolling on iOS
• Mobile Safari (Whyyyy?!)

这篇关于固定文本区域时，iOS Safari CSS位置已修复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！