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

mdDialog - IE11/Win8.1 targetEvent no longer causing dialog to open/close from button #3828

Closed
Londovir opened this issue Jul 20, 2015 · 3 comments
Closed

mdDialog - IE11/Win8.1 targetEvent no longer causing dialog to open/close from button #3828

Londovir opened this issue Jul 20, 2015 · 3 comments
Assignees
@ThomasBurleson
Milestone
0.10.1

Comments

@Londovir
Copy link

Confirmed on Demo site using #master. Under previous commits, including most of 0.10.1-rc1, using IE11/Win8.1 showed the expected opening of an md-dialog as "growing" from the targetEvent button originator, and "shrinking" down to that area as well.

With recent code change around 0.10.1-rc2, the targetEvent parameter is not getting used by the code to perform this behavior. Instead, IE11/Win8.1 seems to lag after clicking a button, and after about a half second delay the backdrop and dialog appear almost simultaneously on the screen with no/little animation. When dismissing, the dialog dismisses downwards towards the center bottom of the viewport, which seems to be the behavior when no targetEvent is indicated.

I do not see this behavior in Chrome or Firefox, however.
@ThomasBurleson ThomasBurleson added this to the 0.10.1-rc3 milestone Jul 20, 2015
@ThomasBurleson ThomasBurleson self-assigned this Jul 20, 2015
ThomasBurleson added a commit that referenced this issue Jul 21, 2015
@ThomasBurleson
fix(backdrop, dialog, css): improve position and animations of backdrop
44c20b2 
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
- 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
@ThomasBurleson ThomasBurleson mentioned this issue Jul 21, 2015
Closed
ThomasBurleson added a commit that referenced this issue Jul 21, 2015
@ThomasBurleson
fix(backdrop, dialog, css): improve position and animations of backdrop
3e38550 
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
@Londovir
Copy link
Author

@ThomasBurleson Although this was closed on July 21, I'm still (as of 9/14/15) seeing the behavior I described above failing in IE11. This is running on Windows 10 IE11:

ie11dialog

IE11 has a number of differences to note:

  1. The backdrop does not become semi-transparent, but looks to be completely opaque.
  2. The backdrop completes its animation into place, and then the dialog animates into place.
  3. The dialog does not expand from the clicked button, nor dismiss away to the button either.
  4. For some reason, the demo div element that ends up with the class dialog-demo-content in the example in IE11 ends up glitched in some fashion and appears to be display:none, even though it doesn't appear to be styled that way. I have to use IE11's F12 tools to selectively set essentially every div after that one, contained in the popupContainer div to display:none, then toggle display:none on and off on that dialog-demo-content div in order to get it to reappear as it should. Not sure why that is happening.

Now, for contrast, here's the same in Chrome:

chromedialog

This is as it is expected. (Performed from most updated IE11 in Windows 10 and Chrome in Windows 10 from MD Demo page.)

If you believe this is an unrelated issue to the original issue here, then let me know and I can create this as a new issue rather than reopen this one, but I don't believe it has been addressed for IE11.

BTW, Edge performs identical to Chrome for me. It is only IE11 that is exhibiting this issue.

@abrahamtorres10
Copy link

http://plnkr.co/edit/6URLKYpatz3EeJ7bkpVA?p=preview i can also reproduce this issue, not fixed yet

@ddtch
Copy link

ddtch commented Aug 19, 2016

Same problems. Does anyone have any solutions?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@ThomasBurleson ThomasBurleson

Labels
None yet
Projects
None yet
Milestone
0.10.1
Development

No branches or pull requests
4 participants
@ThomasBurleson @ddtch @abrahamtorres10 @Londovir