Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

fix(backdrop, dialog, css): improve position and animations of backdrop #3841

Closed
wants to merge 1 commit into from

Conversation

ThomasBurleson
Copy link
Contributor

improve backdrop animations and css to account for scroll and parenting:

  • backdrop
  • css uses transition and ng-enter/ng-leav
  • css transitions opacity instead of background-color
  • css no longer uses key frames
  • postLink uses $animate.pin if available
  • postLink logs a warning if the backdrop parent has a style 'position:static'
  • util
    • disableElementScroll uses specified element or body; used by dialog to disable dialog parent scrolling when parent is explicitly specified
  • dialog

Fixes #3826, #3828, #1967, #1106

@ThomasBurleson
Copy link
Contributor Author

@robertmesserle - would you mind reviewing for inclusion in RC3

if (position == 'static') {
// backdrop uses position:absolute and will not work properly with parent position:static (default)
var positionError = "<md-backdrop> may not work properly in a scrolled, static-positioned parent container.";
$log.warn( positionError );
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

improve backdrop animations and css to account for scroll and parenting:
-  backdrop
  - css uses transition and ng-enter/ng-leav
  - css transitions opacity instead of background-color
  - css no longer uses key frames
  - postLink uses $animate.pin if available
  - postLink logs a warning if the backdrop parent has a style 'position:static'
-  util
  - disableElementScroll uses specified element or body; used by dialog to disable dialog parent scrolling when parent is explicitly specified
  - refactor(util): centralize use of backdrop $compile
-  dialog
  - css for 'md-dialog-container' is now 'position:absolute'; 'fixed' is deprecated
  - hide backdrop now runs in parallel with hide dialog
  - basic demo #1 now uses element '#popupContainer' as parent; instead of document.body
  - basic demo #1 has #popupContainer 'position:relative' styling

Fixes #3826, #3828, #1967, #1106
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

md-dialog: Timing change on backdrop removal in newer commits to master
2 participants