On Chrome for Android, touching an html text input element located inside an iframe at fixed position does not raise the keyboard consistently when the document is zoomed greater than 100 percent.
http://theyrule.net/test/iframetest/
For example: visit this page on Chrome for Android and select the input, it will bring up the keyboard. Now dismiss the keyboard and scale the page (I have put some content on the page just so the scaling is discernible). If the page is zoomed in - touching the html text input element in the iframe will not always bring up the input. It can be brought up again by returning to 100% zoom level.
index.html
<!DOCTYPE html>
<html>
<style>
body {background-color:#FFCC00; font:80px sans-serif; color:#FFF; width:1000px; height:2000px;}
div { width:300px; height:1000px; float:left; padding:0.1em;}
</style>
<head>
</head>
<body>
<div style="background-color:#CC3333;">A</div>
<div style="background-color:#FF9900;">B</div>
<div style="background-color:#FFCC00;">C</div>
<iframe src="contents.html" style="width:300px; height:100px; position:fixed; bottom:0; right:0;">
</body>
</html>
contents.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="text" />
</body>
</html>
I would like the keyboard to be raised at any zoom level.
This appears to be a Chrome bug, is there a workaround?
Is this a focus issue? I can detect the touch event in the iframe, for example if I set a listener I can make it clear the placeholder text in the input, but it will not bring up the keyboard.
Adding a listener to touchstart which then calls focus on the input field and prevents the default action seems to be a work around. The input element was being blurred - perhaps the focus went through to the embedding page.