Ionic-framework: 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: https://github.com/driftyco/ionic/issues/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.

[mlynch]

@dwilt okay, there were a few issues fixed with PTR since 1.2.0. I think before we move forward, try 1.2.4 and see if it's still there? If not, let me know and I definitely want to know about it

[dwilt]

Ok, I'll let you know what we see after we upgrade.

[dwilt]

@mlynch we updated to 1.2.4 today and the problem still exists. Sticking with the js scrolling in the mean time. As far as the pull to refresh, we're going to keep an eye on that as well but there just seems to be flickering of the images when the list is pulled down that they are inside of

[mlynch]

@dwilt if you leave it <ion-scroll> and don't add the overflow-scroll blah property, it should give you JS scrolling on iOS and native scrolling on Android. Are you seeing that?

Thanks for the PTR notice, will track that and look into it.

[dwilt]

@mlynch no, because we're seeing it to false globally:

.config(($ionicConfigProvider) => {
    $ionicConfigProvider.scrolling.jsScrolling(false);
})

do you want me to try and turn it on, rebuild and test?

[mlynch]

@dwilt yea I'd remove that line and try again. That way you'll get JS scrolling on iOS to avoid this issue, but native on Android which needs it the most (and doesn't have this issue).

[dwilt]

@mlynch but the rest of the app performs so much better with native scrolling on iOS than the JS scrolling. I thought it would be better to default it to the native and then turn to the JS when we need it (like in this case). Are you not of the same mindset?

[mlynch]

@dwilt oh, I see. Sure, if that works then go for it, set <ion-scroll overflow-scroll="false"> to disable it for this one. We're fixing this all in a future release

[ghaiat]

Hello
I am not sure i understand why this issue is being marked as fixed . i am facing the same exact issue and reverting back to js scrolling is not really an option as it s slower on older devices than native scrolling.

Is there a fix or a workaround i missed?

Thanks

[ghaiat]

hello
any update ? this issue shouldnt be close .. can you reopen it ?

[ghost]

Having some Android-only scrolling issues myself. Not sure what's causing it. I have a feeling they can't see what we're typing on these closed tickets.

[Ross-Rawlins]

+1