IOS 12.2: scroll bug after ion-select change value

[informatikTirol]

In IOS 12.2 scroll does not work after ion-select change value
to reproduce open https://informatik.tirol/ionicbug on IOS 12.2 mobile safari

I'm submitting a ... (check one with "x")
[ x] bug report
[ ] feature request

Current behavior:
In IOS 12.2 scroll does not work after ion-select change value

Expected behavior:
In IOS 12.2 scroll works after ion-select change value

Steps to reproduce:
to reproduce open https://informatik.tirol/ionicbug on IOS 12.2 mobile safari
scroll works at start
then select a value on ion-select component
scroll does not work anymore

it is a clean ionic 3 project: ionic start helloWorld tabs --type=ionic-angular

[informatikTirol]

Found a temporay quickfix

<ion-content padding #pageTop (ionScroll)="logScrolling($event)">
...

` logScrolling($event) {
if ($event) {
this._yScroll = $event.scrollTop;
this._xScroll = $event.scrollLeft;
}

} `

...

`
this.scrollIOS12BugHandler = () => {
let y = this._yScroll;
y += y < 40 ? 40 : -40;
this.pageTop.scrollTo(this._xScroll, y);
console.log('scrollIos12Bug');
};

    if (this.globals.isIOS){
        this.events.subscribe('scrollIOS12Bug', this.scrollIOS12BugHandler);
    } `

...

<ion-select [(ngModel)]="..." (ionChange)="onChange(...)">
...

`onChange(option = null) {
//Input created with const factory = this.resolver.resolveComponentFactory(this.dynamicComponentProvider.resolveComponentsName(step.type)); -> event
this.events.publish('scrollIOS12Bug',this.data); //derzeit fuer conditinal property

}`

[liamdebeasi]

Hi there,

Please try this with the latest nightly build of Ionic npm i ionic-angular@nightly, and let me know if you are still experiencing this issue.

Thanks!

[informatikTirol]

Hi @liamdebeasi,

the issue is still there.

THX

[tgangso]

Also experiencing this issue. Tested "ionic-angular": "3.9.4-201904101244". On some occations it does not happend the first time i change the select.

[liamdebeasi]

Hi @informatikTirol,

Would you be able to share the code for the demo you posted? (a GitHub link to a repo is fine)

Thanks!

[informatikTirol]

HI @liamdebeasi

here the demo code: https://www.dropbox.com/s/c9qsjpe3njf2bae/helloWorld.zip?dl=0

[liamdebeasi]

Hi @informatikTirol,

I tried your app using a released version of Ionic and was able to reproduce the issue; however, I am no longer seeing the issue when using the latest Ionic nightly.

Can you confirm whether or not the nightly fixes your issue?

Thanks!

[tgangso]

@liamdebeasi i can confirm the issue is there with "ionic-angular": "3.9.4-201904101244". Tested on my app, but i don't have a repo for you. It does not seem to happen every time, about every second time i select something.

When the issue occurs, i have to click the select twice before i can select a new value.

The html if it helps.

      <ion-item>
        <ion-label>Type</ion-label>
        <ion-select interface="popover" [(ngModel)]="type" (ionChange)="x(); y();">
          <ion-option value="a">a</ion-option>
          <ion-option value="b">b</ion-option>
          <ion-option value="c">c</ion-option>
        </ion-select>
      </ion-item>

[liamdebeasi]

Hi there,

Thanks for the follow up. I tried using the code you provided but was unable to reproduce the issue with that either.

What device are you testing this on?

[tgangso]

iPad 6th gen, mr7j2kn/a iOS 12.2.

The app is a PWA run in Safari.

I can try to set up a repo tomorrow if you are unable to reproduce.

Can be experienced on http://bit.ly/2IbNADL (running "ionic-angular": "3.9.4-201904101244") you would have to sign up and open the recipe, and change the recipe type in the drop down for example.

[informatikTirol]

HI @liamdebeasi ,
I have a IPad Pro IOS 12.2 and a IPhone X IOS 12.2 and a Iphone 8 IOS 12.2, on all Devices the bug still exits...
When you open https://informatik.tirol/ionicbug on a mobile Safari with IOS 12.2 an you change a select option, scroll does still work?

[StevenH86]

Just to add on to this.... If you use a pop over inside a modal and whatever you do in the popover doesn't update the modal view, you won't be able to scroll inside the modal after dismissing the popover.... but the scroll action you did on the modal will actually cause the screen behind the modal to scroll.

Example.... you use a pop over to filter a list inside the modal.... Instead of selecting a filter option you simply dismiss the pop over, you will no longer be able to scroll the list.... but if you then dismiss the modal, you will see the screen behind the modal has scrolled.

If the filter updates the list order in the modal, the list will scroll as expected.

EDIT - Side note.... it only seems to occur on a device, not in the emulator. Tested on iPhone 6s and iPhone Xs

EDIT 2 - Updated to nightly update and it seems to have fixed the bug on iPhone 6.... waiting for test results from iPhone Xs.

[liamdebeasi]

Hi everyone,

Just to clarify: The fix available in the latest nightly is intended to fix scrolling issues when running in a standalone app (i.e. Cordova with WKWebView). Issues in Safari are potentially different issues as WKWebView !== Safari.

I will be looking into the Safari issues soon. Thanks!

[tgangso]

@liamdebeasi Thanks, hope you can fix it soon. For the end user it will feel like the whole application is frozen, and they end up force closing it or stop using it.

[AntoineBouquet]

Hi @liamdebeasi,

The latest nightly version "ionic-angular": "3.9.4-201904101244" fix the issue for me on standalone app for iOS 12.2 devices.

Do you know when these fixes will be released in a 3.9.5 version ?

Thanks in advance
Antoine

[liamdebeasi]

Hi there,

We are still working on addressing the issues in Safari. Until then, you can use the nightly build of Ionic.

Thanks!

[informatikTirol]

HI @liamdebeasi,
the IOS 12.2 bug is solved when running as app on the device, thank you. I still have a little lag after value change, but scrolling works.
On mobile safari the problem still exists.

Thanks!

[fakerLinXiao]

HI @liamdebeasi,
on IOS 12.2, the scroll bug is solved, but i still have a bug with maps. I use cordova-pliugin-googlemaps, and map didn't display after i update nightly version "ionic-angular": "3.9.4-201904101244".

[liamdebeasi]

Hi @fakerLinXiao,

This issue thread is only for scrolling issues on iOS 12.2. Please open a new issue regarding the cordova plugin.

Thanks!

[liamdebeasi]

Hi @informatikTirol,

I tried the app you sent over and was able to reproduce this issue; however, when using the nightly build the issue no longer occurs. Are you still experiencing this issue in mobile safari?

[liamdebeasi]

Hi everyone,

This issue has been resolved and is available in Ionic 3.9.5.

You can upgrade using npm i ionic-angular@latest.

Thanks for your patience as we worked to resolve this issue! If you encounter any more iOS 12.2 issues, please open a new issue.

[amility]

This scroll issue fixed. Great job by ionic Team :)

[yokeshvaradhan]

HI all i just updated my ionic to 3.9.5, but fortunately the scrolling issue is not fixes for ios mobile device, things works fine in android device, desktop browser but scrolling a list it flickers in ios device

Some on help me please

[fvadouko]

I upgrade using npm i iionic-angular@nightly. In my package.json, the version of this update is : ^3.9.8-201910071810. And This scroll issue fixed.

[reesz]

Can I use the nightly build if my project uses the @ionic/angular instead of ionic-angular package? Currently running @ionic/angular at the latest 4.11.4, but still encountering this bug.