[SalesForce] Salesforce1 on focus scroll to the top

I've this issue using Salesforce1 on mobiles (Android and IOS) with a long lightning component form: Tapping on an input text element at the bottom part of the form, scrolls the screen to the top. After the editing of the form element I'm not able to scroll again to the top and forcing it fires the overscroll, refresh the all page and losting all inserted data.

To reproduce:
lightning component form

<aura:component implements="force:appHostable">
<ltng:require styles="/resource/SLDS0120/assets/styles/salesforce-lightning-design-system.min.css"/>    

<p>TEST PAGE START</p>

<div class="slds-form--stacked">
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <div class="slds-form-element">
        <label class="slds-form-element__label form-element__label--small" for="inputSampleSmall">Input Label</label>
        <div class="slds-form-element__control">
            <input id="inputSampleSmall" class="slds-input slds-input--small" placeholder="placeholder" type="text"  />
        </div>
    </div>
    <p>TEST PAGE END</p>
</div>

1 – After tapped on the imput text field, the focus is in it but the screen scroll to the top when mobile keyboard is showed into the screen.

2 – Starting writing, force the screen back to the imput text field; You can see what you are writing.

3 – After wrote, mobile keyboard is hidden and you see screen in the correct position.

4 – If you try to scroll to the top you cant as the top limit is noe set to the actual screen position (much below the real top) and forcing the scroll fires the overscrolling and refresh the all page, losing all data set.

Have someone the same issue??

Thanks!

Best Answer

I found a solution it was to add some media queries and to avoid plagiarism I will provide a link:

https://bitbucket.org/snippets/appirioux/nyyek (Solution)

The problem is that iOS Safari handles iFrames a bit differently than most browsers. It is unable to detect the height of content that is outside of the viewport when the page loads.

Since the height of the html, and body tags are only the size of the viewport, anything beyond that, even though it's viewable, will force the page to scroll back to the top when anything is selected. The reason for that is because the item (button, form field) isn't actually being clicked.

Related Topic