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

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

[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!