Has anyone else encountered an issue with textareas on mobile safari? I'm noticing that when a textarea is focused, the viewport seems to add padding under the document. Strangely, inspecting and selecting the area doesn't lead to identifying an element or even the html node.
Interestingly, the presence of this padding does not depend on the position of the textarea on the screen or whether it is absolutely positioned. It always appears when the textarea is focused. Sometimes you have to scroll down to see it, but ideally this padding shouldn't be visible at all.
I've included examples below with screenshots and code. In one, there's a cover that extends the full width and height to indicate the normal bounds of the document, and the textarea is absolutely positioned at the bottom of the body.
Unfocused: https://i.sstatic.net/UX8Aj.png
Focused (pointing out the unwanted padding): https://i.sstatic.net/mpWft.png
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>
If anyone has any insights on this issue, please share. Thank you.