Scrolling on ios device finger input tag

Question

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?

I cannot recreate this problem at all. I am using an iPad Air and have a webpage 4000px in height with a single input near the top. I can scroll when my finger hits the input and I do the scroll motion. The only time it doesn't is if you leave your finger on the input (doing the select action). Do you have a demo that we can see to better explain the problem? — Ruddy, Mar 04 '15 at 08:54
I will provide a demo shortly. My code was already pretty simple, but I pruned it down to a very small example, but then things started working. I need to figure out what piece makes it not work. Should have something today. — corbin, Mar 04 '15 at 18:12
See my answer below for example code and what solved it for me. — corbin, Mar 04 '15 at 18:17
@Captainlonate : Please see my answer below. Can you tell me if you had a similar piece of code in your work? — corbin, Mar 04 '15 at 18:25
Btw. I could start a scroll on top of an input once an input had focus and the soft keyboard was up, but could not start a scroll on top of an input when one wasn't already focused with the keyboard showing. — corbin, Mar 04 '15 at 18:31

score 2 · Answer 1 · answered Oct 16 '17 at 08:16

2

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.

answered Oct 16 '17 at 08:16

HarshvardhanSharma

754
2
14
28

corbin · Answer 2 · 2015-03-04T18:32:05.727

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.

score 0 · Answer 3 · answered Mar 04 '15 at 08:50

0

A workaround for this issue might be :

function setTextareaPointerEvents(value) {
    var nodes = document.getElementsByTagName('textarea');
    for(var i = 0; i < nodes.length; i++) {
        nodes[i].style.pointerEvents = value;
    }
}

document.addEventListener('DOMContentLoaded', function() {
    setTextareaPointerEvents('none');
});

document.addEventListener('touchstart', function() {
    setTextareaPointerEvents('auto');
});

document.addEventListener('touchmove', function() {
    e.preventDefault();
    setTextareaPointerEvents('none');
});

document.addEventListener('touchend', function() {
    setTimeout(function() {
        setTextareaPointerEvents('none');
    }, 0);
});

This will make Mobile Safari (others not tested so far) ignore the textareas for scrolling but allows to set focus etc. as usual.

answered Mar 04 '15 at 08:50

Cristi Marian

443
8
18

See my answer (incomplete answer) for code sample and what was causing my issue (I don't know why though). With my code, starting a touchmove on top of an input while no input is in focus and the soft keyboard is hidden will be ignored. But, if you start a touchmove on a input after the keyboard is up, things will work. With your code, starting a touchmove on top of an input will be ignored regardless of whether the keyboard is up or not. I actually wanted scrolling to work in both cases, not disable it in both cases. – corbin Mar 04 '15 at 18:35
1

You copied this code from http://stackoverflow.com/questions/4178725/ios-webkit-touchmove-touchstart-not-working-on-input-textarea . You should at least provide a reference to where you are copying from. Also, the place this code was copied from specifically says it disables scrolling. Here myself and @Captianlonate want scrolling to work. – corbin Mar 04 '15 at 19:19

score 0 · Answer 4 · answered Mar 10 '15 at 11:33

0

You can try below code to prevent input on touchmove

$(document).on('touchmove','input',function(e){
      e.preventDefault();
});

answered Mar 10 '15 at 11:33

Amit

827
10
17

I, nor the OP want to disable touchmove. – corbin Mar 11 '15 at 05:59

Scrolling on ios device finger input tag

4 Answers4

Linked