Ionic-framework: bug: Main menu jitters when dragging open (Ionic 5 & Ivy)

[lincolnthree]

Bug Report

Ionic version:


[x] 5.x

Current behavior:

When dragging the side-menu open, a visible jitter occurs upon releasing drag after full menu extension.

See video. The first few attempts open the menu normally within drag/menu bounds. After extending the drag gesture beyond the 'end' boundary, the menu will jitter/bounce before snapping open. Seems to be replaying the last 5% or so of the animation for some reason.

Expected behavior:

The menu should open smoothly and not jitter.

Steps to reproduce:

Run the following repo:
https://github.com/lincolnthree/ionic-menu-jitter

Either deploy to a native device, or run chrome devtools emulated vieport so that the menu appears. (I used Pixel 2 XL to reproduce.)

No code changes are required to the application. This example used the following base template via ionic start:

ionic start menu-jitter sidemenu --type=angular

Related code:
Just make sure you are running Ionic 5@latest and Angular 9@latest. Example repo package.json has all relevant deps:

````
"dependencies": {
"@angular/common": "~9.0.0-rc.10",
"@angular/core": "~9.0.0-rc.10",
"@angular/forms": "~9.0.0-rc.10",
"@angular/platform-browser": "~9.0.0-rc.10",
"@angular/platform-browser-dynamic": "~9.0.0-rc.10",
"@angular/router": "~9.0.0-rc.10",
"@ionic-native/core": "^5.0.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "^5.0.0-rc.0",
"@ionic/core": "^5.0.0-rc.0",
"core-js": "^2.5.4",
"rxjs": "~6.5.1",
"tslib": "^1.9.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/architect": "~0.801.2",
"@angular-devkit/build-angular": "~0.900.0-rc.10",
"@angular-devkit/core": "~9.0.0-rc.10",
"@angular-devkit/schematics": "~9.0.0-rc.10",
"@angular/cli": "~9.0.0-rc.10",
"@angular/compiler": "~9.0.0-rc.10",
"@angular/compiler-cli": "~9.0.0-rc.10",
"@angular/language-service": "~9.0.0-rc.10",
"@ionic/angular-toolkit": "^2.1.1",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.7.5"
},

````

insert short code snippets here

Other information:

Ionic info:

sharktop:menu-jitter lincoln$ ionic info

Ionic:

   Ionic CLI                     : 5.4.13 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 5.0.0-rc.0
   @angular-devkit/build-angular : 0.900.0-rc.10
   @angular-devkit/schematics    : 9.0.0-rc.10
   @angular/cli                  : 9.0.0-rc.10
   @ionic/angular-toolkit        : 2.1.2

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.13.0 (/usr/local/lib/node_modules/node/bin/node)
   npm    : 6.13.6
   OS     : macOS Catalina

[lincolnthree]

Giphy seems to have cut out some relevant frames. See full video:
https://github.com/lincolnthree/ionic-menu-jitter/blob/master/Screen%20Recording%202020-01-24%20at%208.41.46%20AM.mov?raw=true

[lincolnthree]

@liamdebeasi ^ Looks like Angular 9 may be changing something that affects animations. Just a heads up.

[liamdebeasi]

Actually noticed this the other day 😄. Will fix -- thanks!

[lincolnthree]

Nice! It was driving me crazy trying to track it down. Deleted all my styles, layouts, etc. Finally just started from the other direction and it revealed itself, thankfully.

[liamdebeasi]

Can you try the following dev build and let me know if the issue is fixed?

npm i @ionic/[email protected]

[lincolnthree]

Couldn't verify. Lots of errors after installing this one. Not sure the build is 'good'. I tried removing node_modules, etc, didn't work.

Thanks for the quick patchwork though! Happy to keep testing.

````
[ng] Add only entry points to the 'files' or 'include' properties in your tsconfig.
[ng] WARNING in /Users/lincoln/projects/maritlabs/topdecked-unified/src/app/pages/arena/overlay/arena-overlay.module.ts is part of the TypeScript compilation but it's unused.
[ng] Add only entry points to the 'files' or 'include' properties in your tsconfig.
[ng] WARNING in /Users/lincoln/projects/maritlabs/topdecked-unified/src/app/pages/arena/overlay-card/arena-overlay-card.page.ts is part of the TypeScript compilation but it's unused.
[ng] Add only entry points to the 'files' or 'include' properties in your tsconfig.
[ng] WARNING in /Users/lincoln/projects/maritlabs/topdecked-unified/src/app/pages/arena/overlay-card/arena-overlay-card.module.ts is part of the TypeScript compilation but it's unused.
[ng] Add only entry points to the 'files' or 'include' properties in your tsconfig.
[ng]
[ng] ERROR in node_modules/@ionic/angular/node_modules/@ionic/core/dist/types/components.d.ts:2844:13 - error TS2320: Interface 'HTMLIonInputElement' cannot simultaneously extend types 'IonInput' and 'IonInput'.
[ng] Named property ''value'' of types 'IonInput' and 'IonInput' are not identical.
[ng]
[ng] 2844 interface HTMLIonInputElement extends Components.IonInput, HTMLStencilElement {}
[ng] ~~~~~~~
[ng]

````

[liamdebeasi]

🤔 Try this one: 5.0.0-dev.202001241746.664cca1

[lincolnthree]

I get the same error. Do I also need core? Trying that.

[lincolnthree]

Yep that was it.

[lincolnthree]

@liamdebeasi The menu issue, however, does not seem resolved :/

[liamdebeasi]

Ok try this one 5.0.0-dev.202001241807.c766c26. Looks like there was a similar bug that I was reproducing instead of the reported bug (I fixed both). I tested this particular bug in a sidemenu starter and it appears to be fixed.

[lincolnthree]

@liamdebeasi That one fixed it! Thanks so much. Let me know if you need anything else for this one!

[liamdebeasi]

Glad to hear the bug is fixed. This issue has been resolved via https://github.com/ionic-team/ionic/pull/20288 and will be available in an upcoming release of Ionic.

[lincolnthree]

:D

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.