bug: keyboard open prevents ion-scroll scrolling

[dwilt]

Platform: iOS9 (version 9.2)
Ionic: 1.2.0

We have a search field inside of a modal with an ion-scroll underneath it. When you tap into the field, the keyboard opens as expected, but the list under the search box becomes unscrollable. Dragging around doesn't move it at all. When you hit "Done" on the keyboard and close it however, the list becomes scrollable again. See the attached screenshots:

Dragging working:

Dragging not working (just tapped on search input and opened keyboard):

[dwilt]

Update: if I force JS scrolling on the ion-scroll via overflow-scroll="false", it works correctly. So it clearly has to do with the native scrolling.

[SebastianSchirmer]

Have you tried it using the most recent Ionic version 1.2.4 already?

[SebastianSchirmer]

This issue thread might help: #4888

[mlynch]

Looking into for 1.2.5 release here soon

[mlynch]

Okay, here's the deal. We're back to using JS scrolling for iOS and native for Android by default for now (1.2.4). We ran into some issues with iOS and our layout system and keyboard process that we are fixing in Ionic 2, but for now we've gone back to it since iOS can handle it fine but Android really needs the native scrolling.

If you leave the default scrolling behavior in, this should work for you in 1.2.4. Can you verify that?

Also, do you have a high level markup structure for this, something like (to help me test some of the edge cases here):

    <ion-pane>
      <ion-header-bar id="header" class="bar-positive">
        <h1 class="title">New Stop</h1>
      </ion-header-bar>

      <header class="bar bar-header item-input-inset">
        <label class="item-input-wrapper">
          <i class="icon ion-search placeholder-icon"></i>
          <input type="search" placeholder="Search">
        </label>
        <button class="button button-clear button-positive">
          Cancel
        </button>
      </header>

      <ion-scroll style="height: 600px">
        <div ng-repeat="stop in items" style="height: 40px">
          <i class="icon ion-ios-location"></i>
          {{stop.title}}
        </div>
      </ion-scroll>

    </ion-pane>

[dwilt]

@mlynch the native scrolling seems to be working everywhere else without too many problems throughout the rest of app. We'll go ahead and use the JS scrolling on a case-by-case basis where we think we need to if we're seeing issues. So falling back to the JS scrolling for this case is fine. We haven't upgraded to 1.2.4 yet but I'm sure we will soon. That being said, here is the complete markup for the component. Let me know if you need the entire page markup as well:

div.autocomplete
    div.autocomplete-input-container
        i.zmdi.zmdi-search.autocomplete-icon
        input.autocomplete-input(
            type="text"
            ng-change="autocomplete.inputChanged()"
            ng-model="autocomplete.input"
            placeholder="{{ autocomplete.placeholder }}"
        )
        button.icon-button.autocomplete-reset(
            ng-if="autocomplete.input"
            ng-click="autocomplete.reset()"
        )
            i.zmdi.zmdi-close-circle-o
    loading-bar.autocomplete-results-loading(
        ng-class="{'active': autocomplete.getLoadingResults() }"
    )
    ion-scroll.autocomplete-results-list-container(
        delegate-handle="autocomplete-results-list-scroll"
        overflow-scroll="false"
        ng-show="autocomplete.resultsVisible"
    )
        ul.autocomplete-results-list
            li(
                ng-repeat="result in autocomplete.results track by $index"
                ng-click="autocomplete.selectResultHandler(result)"
            )
                i.zmdi.zmdi-pin.autocomplete-result-icon
                a.button.clear-button.autocomplete-result
                    span.autocomplete-result-title(ng-bind="result.title")
                    span.autocomplete-result-subtitle(ng-bind="result.subtitle")

[mlynch]

@dwilt Awesome, thanks, similar to my markup. Are you fixing the scroll area to a specific height?

[dwilt]

We have a max height set on it. Here's the component scss:

.autocomplete {
    position: relative;

    .autocomplete-input-container {
        position: relative;

        .autocomplete-icon {
            color: $blue;
            position: absolute;
            left: 12px;
            top: 7px;
            font-size: 28px;
        }

        .autocomplete-input {
            border: 1px solid $light-gray;
            border-radius: 40px;
            height: 40px;
            display: block;
            padding: 0 40px;
            width: 100%;
            text-align: left;
            font-size: 1.3em;
            line-height: 1.2em;
            font-weight: 400;
        }

        .autocomplete-reset {
            color: $medium-gray;
            position: absolute;
            right: 2px;
            top: 3px;
            font-size: 22px;
        }
    }

    .autocomplete-results-list-container {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        bottom: auto;
        background-color: #fff;
        box-shadow: 0 3px 4px rgba(0, 0, 0, .2);
        max-height: 300px;
        border-top: 1px solid $light-gray;

        &:after {
            content: "";
            width: 100%;
            height: 70px;
            @include vertical-gradient(rgba(white, 0), rgba(white, 1));
            position: absolute;
            bottom: 0;
            left: 0;
            pointer-events: none;
        }

        .autocomplete-results-list {
            @include reset-list-style;

            > li {
                border-bottom: 1px solid $light-gray;
                width: 100%;
                position: relative;

                .autocomplete-result-icon {
                    z-index: 1;
                    position: absolute;
                    left: 0;
                    top: 0;
                    bottom: 0;
                    width: 50px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: $blue;
                    font-size: 22px;
                }

                .autocomplete-result {
                    display: block;
                    width: 100%;
                    text-align: left;
                    border: none;
                    padding: 10px 20px 10px 50px;
                }

                .autocomplete-result-title,
                .autocomplete-result-subtitle {
                    text-overflow: ellipsis;
                    overflow: hidden;
                    width: 100%;
                    white-space: nowrap;
                }

                .autocomplete-result-title {
                    font-size: 1em;
                    display: block;
                    line-height: 1.4em;
                }

                .autocomplete-result-subtitle {
                    display: block;
                    color: $medium-gray;
                    font-size: 0.8em;
                    line-height: 1.2em;
                    margin-right: 20px;
                    font-weight: 400;
                }
            }

            > :last-child {
                border: none;
            }
        }
    }
}

[dwilt]

the max-height: 300px; for the .autocomplete-results-list-container is probably what you're looking for

[mlynch]

Okay great. Ping me if something else stands out as broken? We'll try to get on it asap. Also, the app looks awesome :)

[dwilt]

Will do, thanks man

[dwilt]

@mlynch Actually, now that you ask, we are seeing a really goofy thing with the pull-to-refresh on only one of our pages. Since it's happening only on 1 I'm hesitant to file a bug but since all the pages are using the same components, I am suspicious.. since the pull-to-refresh is also dependent on the scrolling, that might be another thing we've uncovered. If you're curious to see it, I'd be happy to do a screenshare.