Menu
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.
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:
Focussed (with arrow pointing to unwanted padding):
Code:
<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.
613
I don't think this is solvable with CSS, it seems to be Safari chrome.
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
}
You can play here. 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 :)
200
That looks like iPhones input zoom feature causing that padding...
Check the answers here: Disable Auto Zoom in Input "Text" tag - Safari on iPhone
It seems setting the input field font to 16px disables this feature.
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
