当输入集中在移动Safari上时，页面底部的多余填充 [英] Unwanted padding at bottom of page when input focussed on mobile safari
问题描述
我正在使用移动浏览器上的textareas，当将textarea聚焦时，视口似乎在文档下方添加了填充。在检查和选择区域时，它不会解析为元素，甚至无法解析html节点。
I'm working with textareas on mobile safari and when a textarea is focussed the viewport seems to add padding underneath the document. When inspecting and selecting the area, it doesn't resolve to an element, or even the html node.
在文本区域上的哪个位置似乎都没有关系无论屏幕是否处于绝对位置，都必须在聚焦时填充。有时您需要向下滚动以使其可见，但理想情况下根本不可能使其可见。
It doesn't seem to matter where the textarea is on the screen or whether or not it is absolutely position, the padding is always present when its focussed. You sometimes have to scroll down to make it visible, but ideally it shouldn't be possible to make it visible at all.
我添加了一个带有屏幕截图和下面的代码。有一个宽度和高度为100％的封面，用于显示文档的常规边界所在的位置，并且文本区域绝对位于正文底部。
I've added an example with screenshots and code below. There is a cover that is 100% width and height to show where the regular bounds of the document are and the textarea is absolutely positioned at the bottom of the body.
Unfocussed ：
Unfocussed:
关注（带有指向不需要的填充的箭头）：
Focussed (with arrow pointing to unwanted padding):
代码：
<html>
<head>
<meta name="viewport" content="user-scalable=no, width=device-width" />
<style>
html{
background-color: gray;
}
body{
width: 100%;
margin: 0px;
}
#cover{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
display: block;
background-color: green;
}
#textarea{
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 100px;
display: block;
margin: 0px;
font-size: 18px;
}
</style>
</head>
<body>
<div id="cover">Cover</div>
<textarea id="textarea"></textarea>
</body>
</html>
我很感谢人们提供的任何见解。谢谢。
I'd appreciate any insights people have. Thanks.
推荐答案
我认为CSS不能解决此问题，它似乎是Safari chrome。
I don't think this is solvable with CSS, it seems to be Safari chrome.
当我在实际设备（6+）上对其进行测试时，底部的空间为白色。我玩了一些：focus风格的定位游戏，发现我只是切断了容器。
When I test it on an actual device (6+) the space at the bottom is white. I played with some :focus styles with positioning, and found I was only cutting off the container.
#textarea:focus {
border-bottom: 14px solid red;
bottom: -6px; //shows 1px of border
//bottom: -7px; //shows no border
}
您可以在这里玩。 http://codepen.io/ArleyM/pen/NGmbWW?editors=110
就解决方案而言，这是一个设计问题，我想知道是否有一种方法可以利用此空白来发挥自己的优势。用户将专注于他们输入的内容，您可以使其看起来不错：）
As far as a solution goes this is a design problem, I wonder if there's a way that you can use this white space to your advantage. Users will be focussed on what they're entering, you can make this look good :)
这篇关于当输入集中在移动Safari上时，页面底部的多余填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
