Material: panel: sometimes doesn't appear in 1.1.23

Created on 22 Jun 2020  路  4Comments  路  Source: angular/material

Bug

Demo and steps to reproduce the issue

This blank StackBlitz demo can be used to create a reproduction that demonstrates your issue.

Demo URL (required)*: https://material.angularjs.org/HEAD/demo/panel#panel-animations

Detailed Reproduction Steps

  1. Open dialog on panel animations demo
  2. Open dialog twice in reuse demo

Explain the expected behavior

Demos should still work

Explain the current behavior

Panel Animations and Reuse demos are broken.

Discuss the use-case or motivation for changing the existing behavior

Correctness

List the affected versions of AngularJS, Material, OS, and browsers

  • AngularJS: 1.8.0
  • AngularJS Material: 1.1.23
  • OS: macOS
  • Browsers: Chrome

Add anything else we should know

Screen Shot 2020-06-22 at 14 00 33
Screen Shot 2020-06-22 at 14 00 19

urgent Pull Request fixed regression bug

All 4 comments

It seems like only the Slide and Scale animations are broken. Seems like there are leftover inline styles from the end of the previous animation that cause problems on the second run.

For the first issue of panel animations breaking, that's caused by PR https://github.com/angular/material/pull/11942 needing to also this.innerWrapper.removeClass('_md-panel-offscreen'); in _updatePosition(). I've got this fix ready.

For the second issue of re-use of panels causing the reused panel to not remove all of the inline styles after animating closed, that looks like it was caused by PR https://github.com/angular/material/pull/11390. I'm investigating the right way to eliminate these styles being left around.

OK, PR https://github.com/angular/material/pull/11390 does not appear to be at fault here.

It appears that PR https://github.com/angular/material/pull/11856 made panels more re-usable, but it didn't account for the transforms on the md-panel needing to be cleared after the close animation completes.

I've got a solution for this as well and will post a PR to resolve both of these issues soon.

This is fixed in master. Please try out the fix (before we release it) via npm install http://github.com/angular/bower-material#master --save or updating your package.json with "angular-material": "git+ssh://[email protected]/angular/bower-material.git#master",.

If you find any issues, please report them via GitHub issues ASAP.

Was this page helpful?
0 / 5 - 0 ratings