Scroll does not work on IOS 10.2

[kanewanggit]

We created a cordova app using Phonon framework, we used Page navigator Phonon provided to make the registration steps, everything works as expected except one biggest problem which is the long form, when we navigate to the section, the scroll does not work smoothly upon touch and drag, no difference by using double finger. We are using the latest Phonon and Cordova 6.1.1, anyone could help? Much appreciated. Code snippet as the following:

<regsix data-page="true" class="datapage">
    <header class="header-bar">
        <div class="center">
            <h1 class="title">Registration (6/8)</h1>
        </div>
        <a class="btn pull-left icon icon-chevron-left with-circle" href="#!regfive"></a>
        <a class="btn pull-right icon icon-chevron-right with-circle" href="#!regseven"></a>
    </header>
    <div class="content">
        <div class="padded-full">
            <div class="input-wrapper text-center">
                <h2>Personal Info</h2>
                <p>Almost done! Please fill out the form below.</p>
                <form id="fInfo2">
                    <label for="tbDateOfBirth">Date of Birth:</label><input type="date" placeholder="YYYY-MM-DD" id="tbDateOfBirth" required>
                    <label for="Gender">Gender</label>
                    <div id="Gender" class="styled-select">
                        <select id="slGender">
                            <option value="0">Choose Gender</option>
                            <option value="1" selected="selected">Male</option>
                            <option value="2">Female</option>
                            <option value="3">Trans Male</option>
                            <option value="4">Trans Female</option>
                            <option value="5">Androgynous</option>
                            <option value="6">Female to Male</option>
                            <option value="7">Male to Female</option>
                            <option value="8">Other</option>
                        </select>
                    </div>
                    <hr>
                    <br/>
                    <label for="tbAddress1">Mailing Address</label><input type="text" placeholder="Line 1" id="tbAddress1" value="" required>
                    <label for="tbAddress2"></label><input type="text" placeholder="Line 2" id="tbAddress2">
                    <label for="tbCity">City</label><input type="text" id="tbCity" value="" required>
                    <label for="State">State</label>
                    <div id="State" class="styled-select">
                        <select id="slState" readonly="readonly">
                            <option value="State">Choose State</option>
                            <option value="AL">Alabama</option>
                            <option value="AK">Alaska</option>
                            <option value="AZ">Arizona</option>
                            <option value="AR">Arkansas</option>
                            <option value="CA" selected="selected">California</option>
                            <option value="CO">Colorado</option>
                            <option value="CT">Connecticut</option>
                            <option value="DE">Delaware</option>
                            <option value="DC">District Of Columbia</option>
                            <option value="FL">Florida</option>
                            <option value="GA">Georgia</option>
                            <option value="HI">Hawaii</option>
                            <option value="ID">Idaho</option>
                            <option value="IL">Illinois</option>
                            <option value="IN">Indiana</option>
                            <option value="IA">Iowa</option>
                            <option value="KS">Kansas</option>
                            <option value="KY">Kentucky</option>
                            <option value="LA">Louisiana</option>
                            <option value="ME">Maine</option>
                            <option value="MD">Maryland</option>
                            <option value="MA">Massachusetts</option>
                            <option value="MI">Michigan</option>
                            <option value="MN">Minnesota</option>
                            <option value="MS">Mississippi</option>
                            <option value="MO">Missouri</option>
                            <option value="MT">Montana</option>
                            <option value="NE">Nebraska</option>
                            <option value="NV">Nevada</option>
                            <option value="NH">New Hampshire</option>
                            <option value="NJ">New Jersey</option>
                            <option value="NM">New Mexico</option>
                            <option value="NY">New York</option>
                            <option value="NC">North Carolina</option>
                            <option value="ND">North Dakota</option>
                            <option value="OH">Ohio</option>
                            <option value="OK">Oklahoma</option>
                            <option value="OR">Oregon</option>
                            <option value="PA">Pennsylvania</option>
                            <option value="RI">Rhode Island</option>
                            <option value="SC">South Carolina</option>
                            <option value="SD">South Dakota</option>
                            <option value="TN">Tennessee</option>
                            <option value="TX">Texas</option>
                            <option value="UT">Utah</option>
                            <option value="VT">Vermont</option>
                            <option value="VA">Virginia</option>
                            <option value="WA">Washington</option>
                            <option value="WV">West Virginia</option>
                            <option value="WI">Wisconsin</option>
                            <option value="WY">Wyoming</option>
                        </select>
                    </div>
                    <label for="tbZipCode">Zip Code</label><input type="tel" id="tbZipCode" value="" required>
                    <label for="tbIDNumber">Driver's License Number</label><input type="text" id="tbIDNumber" value="" required>
                    <label for="tbIDExpiration">Driver's License Expiration</label><input type="date" id="tbIDExpiration" placeholder="YYYY-MM-DD" value="" required>
                    <label for="tbInsuranceNumber">Health Insurance Number</label><input type="text" id="tbInsuranceNumber" required>
                    <label for="tbInsuranceExpiration">Health Insurance Expiration</label><input type="date" id="tbInsuranceExpiration" placeholder="YYYY-MM-DD" required>
                    <button type="submit" class="btn fit-parent primary" id="fInfo2Submit">Submit</button>
                </form>
            </div>
        </div>
    </div>
</regsix>

`

[John-Henrique]

I try here (Android only) is working. What is use for class datapage?

[kanewanggit]

To be clear, it happens on IOS 10.2, I did not test on Android. I have tried to change .content { -webkit-overflow-scrolling: touch; } to -webkit-overflow-scrolling: auto, but it did not work, could anyone offer any help? Actually it happens to any long form not only when using Page Navigation feature in Phonon.

[John-Henrique]

Can you try replace all HTML of this screen where error happening with other HTML (from screen working)? This will be a simple test, maybe problem is in HTML...

[qathom]

Hi @kanewanggit,

Why are you using .input-wrapper class in the following line?

<div class="input-wrapper text-center">

I think that it can fix your bug.

.input-wrapper is used for floating actions like the following code:

<div class="input-wrapper">
    <input class="with-label" type="email" id="input-1">
    <label class="floating-label" for="input-1">First Name</label>
</div>

[qathom]

The issue is not active and the usage of iOS < 11.x is below 4%. Hence I'm closing this issue.