Menu
I have a basic form on a site with some input fields. If the user tries to scroll the page, and starts to scroll by placing his finger within an input box, it will not let the page scroll. If they start the scroll with their finger somewhere in the body, the page scrolls just fine.
It seems to be the same problem that this guy had, but he said a previous developer had purposefully implemented that and I definitely don't have that problem. Input field prevents page from scrolling on iphone
Any ideas?
554
html {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
Works for input element and iframe element both. The touch event solution solves the scroll issue but disables the focus event on these elements.
110
My code, after simplifying was something like this:
html:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, target-densitydpi=medium-dpi" />
<title>Broken Input Scrolling</title>
<link rel="stylesheet" href="jquery.mobile-1.4.5.min.css">
<script src="jquery.js"></script>
<script src="jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div data-role="page" id="outerDiv">
<div data-role="header">
<h1>Broken Input Scrolling</h1>
</div>
<div data-role="content" id="contentDiv">
<div id="tableDiv">
<table>
<tbody>
<tr>
<td name="nameTitle" id="nameTitle" class="input-row3"><span>Scenario Name</span></td>
<td><input type="email" name="name1" id="name1" placeholder="Scenario 1"/></td>
<td><input type="email" name="name2" id="name2" placeholder="Scenario 2"/></td>
<td><input type="email" name="name3" id="name3" placeholder="Scenario 3"/></td>
<td><input type="email" name="name4" id="name4" placeholder="Scenario 4"/></td>
<td><input type="email" name="name5" id="name5" placeholder="Scenario 5"/></td>
<td><input type="email" name="name6" id="name6" placeholder="Scenario 6"/></td>
<td><input type="email" name="name7" id="name7" placeholder="Scenario 7"/></td>
<td><input type="email" name="name8" id="name8" placeholder="Scenario 8"/></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
css:
table {
width: 90em;
table-layout:fixed;
}
td {
height: 3em;
width: 10em;
border: 0.1em solid black;
}
#tableDiv {
overflow-x: auto !important;
}
#tableDiv > * {
-webkit-transform: translate3d(0,0,0);
}
It turns out that removing this piece fixes the issue:
#tableDiv > * {
-webkit-transform: translate3d(0,0,0);
}
This was unnecessary, but was added earlier on in the real project (much larger) when trying to improve scrolling.
I don't know why this causes an issue for iOS and not Android. If someone could fill in the details around why this occurs (and hence provide a better answer), they can get some of the bounty.
Btw... you will need to add more rows or wider rows if using a big enough screen that no scrolling is needed.
26
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
