input not working in phonegap app

Question

I'm creating a Cordova PhoneGap app and have trouble with the input fields.

I'm using iScroll for scroll and refresh.

Suddenly my input fields aren't responding. So users can't even login when they start the app.

I use standard fields and i can't give the input fields focus. Not even with a wrapper where I set "[input].focus()".

The html code is

<input class="newinput" onclick="this.focus();" type="email" id="email" name="email" value="" autocorrect="off" autocapitalize="off" required="" placeholder="Enter E-mail address">

The CSS is

.newinput {
width: 100%;
border: none;
padding: 0;
margin: 3px 0px 1px 0px;
background: white;
font-size: 16px;
color: #43ACDB;
z-index: 40;
}

Other style is (found with chrome developer console)

-webkit-writing-mode: horizontal-tb;
font: -webkit-small-control;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-appearance: textfield;
-webkit-rtl-ordering: logical;
-webkit-user-select: text; // tried without this line too
cursor: auto;

The input fields have worked before but suddenly not a single one can get focus. Unfortunately, I don't when they stopped working cause I have auto-login so I don't use the input fields for most of the apps functionality.

I have checked all js and css code and haven't got a single line starting with "-webkit-user" (except for debugging)

The code works fine if i just go to the index.html on a browser on my mac but android simulator and browser on iphone, android and ipad has this error

What else can I do to get the input working again?

Answer 1

Ok found the answer. Strangely enough its a iScroll bug that has been around since 2010.

Use the following settings: useTransform and onBeforeScrollStart. E.g.

myScroll = new iScroll(
    'wrapper', /** Change this to match your container ID **/
    {
        useTransform: true,
        onBeforeScrollStart: function (e) {
            var target = e.target;
            while (target.nodeType != 1) {
                target = target.parentNode;
            }
            if (target.tagName != 'SELECT' && target.tagName != 'INPUT'
                && target.tagName != 'TEXTAREA'
            ) {
                e.preventDefault();
            }
        }
        /** Add Any Additional Settings here **/
     }
);