Hi all,
Have stumbled upon what seems to be a bug with how mobile safari renders the cursor when a window.scrollTo() is executed while a user is entering text into a textarea. Have attached source code which illustrates the issue. I'm wondering if anyone has any advice on how I might work around this.
The issue: If a user is entering text into a textarea and a window.scrollTo() is executed, the cursor remains rendered at the position the textarea used to be, not at it's current position.
To recreate: Load the following web page using mobile safari. Touch the textarea, which will open the keyboard. Type a couple of characters and wait. As text is added dynamically to the page, and the window scrolled, you'll see the cursor artifact
Have tried setting the focus() back to the textarea after the scroll, but that doesn't seem to have any effect.
Thanks!
<html>
<head>
<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />
<style type="text/css" media="screen">
textarea {
margin-top:50px;
}
</style>
<script type="text/javascript" charset="utf-8">
window.addEventListener('load', function() {
setTimeout(addContent,5000);
}, false);
function addContent() {
var elem = document.createElement('p');
elem.appendChild(document.createTextNode('Some new text'))
document.getElementById('newContentContainer').appendChild(elem);
window.scrollTo(0,20);
setTimeout(addContent,5000);
}
</script>
</head>
<body>
<div id="newContentContainer"></div>
<div>
<textarea></textarea>
</div>
</body>
</html>
Here's a photo which shows the problem: 