This repository has been archived by the owner on Sep 5, 2024. It is now read-only.
md-menu: completly broken in IE (current HEAD + 0.10.1-rc2) #3837
Comments
stefan-schweiger
changed the title
|
I tried the master branch this morning and saw the same thing in Chrome.. I thought it was a backdrop/z-index issue because my menu was inside a sidenav, but i also noticed |
|
Also does not work with 0.10.1-rc3. Weirdly enough I can't reproduce this in a codepen, but on the demo page and also in my own project it's broken. |
|
Same issue as #3892 The reason why it's hard to reproduce is because it only happens if the animation takes longer than 370ms, which isn't always. IE's JS engine is probably too slow to animate in 370ms on your machine. |
ThomasBurleson
added a commit
that referenced
this issue
Jul 29, 2015
… transitionEnd events.
replace programmatic use of element.css for style changes and use of transitionEnd event listeners with use of ngAnimate's $animateCss; use polyfill for Angular <1.4.
$mdUtil.dom.animator.translate3d() uses $animateCss() instead of waitTransitionEnd()
use animateCss.js polyfill for 'material.animate' module
- add mock `createMockStyleSheet` for animateCss tests
refactors to menu-interim-element.js and select.js
- refactor logic and patterns used
- use $animateCss in place of waitTransitionEnd()
debounce Select and Menu window resize handlers
Dialog uses same showBackdrop/hideBackdrop pattern as Menu and Select
select async demo no longer clears users list when reloading
select demos use `md-input-container { margin-right: 10px;}`
hide Select Backdrop with zero duration
enable full click detection in select-value area by using background color (with zero alpa).
BREAKING-CHANGES: select and backdrop styles added
* select list text is not selectable,
* select backdrop hide duration is 0ms
* select text value background has zero alpha
```scss
.md-text { @include not-selectable(); }
.md-select-value {
background-color: rgba(0,0,0,0);
}
md-backdrop {
&.md-select-backdrop {
transition-duration: 0ms;
}
}
```
Fixes #3919. Fixes #3837. Fixes #3773, Fixes #3640. Fixes #3527. Fixes #3653.
ThomasBurleson
added a commit
that referenced
this issue
Jul 29, 2015
… transitionEnd events.
replace programmatic use of element.css for style changes and use of transitionEnd event listeners with use of ngAnimate's $animateCss; use polyfill for Angular <1.4.
$mdUtil.dom.animator.translate3d() uses $animateCss() instead of waitTransitionEnd()
use animateCss.js polyfill for 'material.animate' module
- add mock `createMockStyleSheet` for animateCss tests
refactors to menu-interim-element.js and select.js
- refactor logic and patterns used
- use $animateCss in place of waitTransitionEnd()
debounce Select and Menu window resize handlers
Dialog uses same showBackdrop/hideBackdrop pattern as Menu and Select
select async demo no longer clears users list when reloading
select demos use `md-input-container { margin-right: 10px;}`
hide Select Backdrop with zero duration
enable full click detection in select-value area by using background color (with zero alpa).
BREAKING-CHANGES: select and backdrop styles added
* select list text is not selectable,
* select backdrop hide duration is 0ms
* select text value background has zero alpha
```scss
.md-text { @include not-selectable(); }
.md-select-value {
background-color: rgba(0,0,0,0);
}
md-backdrop {
&.md-select-backdrop {
transition-duration: 0ms;
}
}
```
Fixes #3919. Fixes #3837. Fixes #3773, Fixes #3640. Fixes #3527. Fixes #3653.
ThomasBurleson
added a commit
that referenced
this issue
Jul 29, 2015
… transitionEnd events.
replace programmatic use of element.css for style changes and use of transitionEnd event listeners with use of ngAnimate's $animateCss; use polyfill for Angular <1.4.
$mdUtil.dom.animator.translate3d() uses $animateCss() instead of waitTransitionEnd()
use animateCss.js polyfill for 'material.animate' module
- add mock `createMockStyleSheet` for animateCss tests
refactors to menu-interim-element.js and select.js
- refactor logic and patterns used
- use $animateCss in place of waitTransitionEnd()
debounce Select and Menu window resize handlers
Dialog uses same showBackdrop/hideBackdrop pattern as Menu and Select
select async demo no longer clears users list when reloading
select demos use `md-input-container { margin-right: 10px;}`
hide Select Backdrop with zero duration
enable full click detection in select-value area by using background color (with zero alpa).
BREAKING-CHANGES: select and backdrop styles added
* select list text is not selectable,
* select backdrop hide duration is 0ms
* select text value background has zero alpha
```scss
.md-text { @include not-selectable(); }
.md-select-value {
background-color: rgba(0,0,0,0);
}
md-backdrop {
&.md-select-backdrop {
transition-duration: 0ms;
}
}
```
Fixes #3919. Fixes #3837. Fixes #3773, Fixes #3640. Fixes #3527. Fixes #3653.
ThomasBurleson
added a commit
that referenced
this issue
Jul 29, 2015
replace programmatic use of element.css for style changes and use of transitionEnd event listeners with use of ngAnimate's $animateCss; use polyfill for Angular <1.4.
$mdUtil.dom.animator.translate3d() uses $animateCss() instead of waitTransitionEnd()
use animateCss.js polyfill for 'material.animate' module
- add mock `createMockStyleSheet` for animateCss tests
refactors to menu-interim-element.js and select.js
- refactor logic and patterns used
- use $animateCss in place of waitTransitionEnd()
debounce Select and Menu window resize handlers
Dialog uses same showBackdrop/hideBackdrop pattern as Menu and Select
select async demo no longer clears users list when reloading
select demos use `md-input-container { margin-right: 10px;}`
hide Select Backdrop with zero duration
enable full click detection in select-value area by using background color (with zero alpa).
BREAKING-CHANGES: select and backdrop styles added
* select list text is not selectable,
* select backdrop hide duration is 0ms
* select text value background has zero alpha
```scss
.md-text { @include not-selectable(); }
.md-select-value {
background-color: rgba(0,0,0,0);
}
md-backdrop {
&.md-select-backdrop {
transition-duration: 0ms;
}
}
```
Fixes #3919. Fixes #3837. Fixes #3773, Fixes #3640. Fixes #3527. Fixes #3653.
ThomasBurleson
added a commit
that referenced
this issue
Jul 29, 2015
replace programmatic use of element.css for style changes and use of transitionEnd event listeners with use of ngAnimate's $animateCss; use polyfill for Angular <1.4.
$mdUtil.dom.animator.translate3d() uses $animateCss() instead of waitTransitionEnd()
use animateCss.js polyfill for 'material.animate' module
- add mock `createMockStyleSheet` for animateCss tests
refactors to menu-interim-element.js and select.js
- refactor logic and patterns used
- use $animateCss in place of waitTransitionEnd()
debounce Select and Menu window resize handlers
Dialog uses same showBackdrop/hideBackdrop pattern as Menu and Select
select async demo no longer clears users list when reloading
select demos use `md-input-container { margin-right: 10px;}`
hide Select Backdrop with zero duration
enable full click detection in select-value area by using background color (with zero alpa).
BREAKING-CHANGES: select and backdrop styles added
* select list text is not selectable,
* select backdrop hide duration is 0ms
* select text value background has zero alpha
```scss
.md-text { @include not-selectable(); }
.md-select-value {
background-color: rgba(0,0,0,0);
}
md-backdrop {
&.md-select-backdrop {
transition-duration: 0ms;
}
}
```
Fixes #3919. Fixes #3837. Fixes #3773, Fixes #3640. Fixes #3527. Fixes #3653.
ThomasBurleson
added a commit
that referenced
this issue
Aug 4, 2015
… transitionEnd events.
replace programmatic use of element.css for style changes and use of transitionEnd event listeners with use of ngAnimate's $animateCss; use polyfill for Angular <1.4.
$mdUtil.dom.animator.translate3d() uses $animateCss() instead of waitTransitionEnd()
use animateCss.js polyfill for 'material.animate' module
- add mock `createMockStyleSheet` for animateCss tests
refactors to menu-interim-element.js and select.js
- refactor logic and patterns used
- use $animateCss in place of waitTransitionEnd()
debounce Select and Menu window resize handlers
Dialog uses same showBackdrop/hideBackdrop pattern as Menu and Select
select async demo no longer clears users list when reloading
select demos use `md-input-container { margin-right: 10px;}`
hide Select Backdrop with zero duration
enable full click detection in select-value area by using background color (with zero alpa).
BREAKING-CHANGES: select and backdrop styles added
* select list text is not selectable,
* select backdrop hide duration is 0ms
* select text value background has zero alpha
```scss
.md-text { @include not-selectable(); }
.md-select-value {
background-color: rgba(0,0,0,0);
}
md-backdrop {
&.md-select-backdrop {
transition-duration: 0ms;
}
}
```
Fixes #3919. Fixes #3837. Fixes #3773, Fixes #3640. Fixes #3527. Fixes #3653.
ThomasBurleson
added a commit
that referenced
this issue
Aug 4, 2015
replace programmatic use of element.css for style changes and use of transitionEnd event listeners with use of ngAnimate's $animateCss; use polyfill for Angular <1.4.
$mdUtil.dom.animator.translate3d() uses $animateCss() instead of waitTransitionEnd()
use animateCss.js polyfill for 'material.animate' module
- add mock `createMockStyleSheet` for animateCss tests
refactors to menu-interim-element.js and select.js
- refactor logic and patterns used
- use $animateCss in place of waitTransitionEnd()
debounce Select and Menu window resize handlers
Dialog uses same showBackdrop/hideBackdrop pattern as Menu and Select
select async demo no longer clears users list when reloading
select demos use `md-input-container { margin-right: 10px;}`
hide Select Backdrop with zero duration
enable full click detection in select-value area by using background color (with zero alpa).
BREAKING-CHANGES: select and backdrop styles added
* select list text is not selectable,
* select backdrop hide duration is 0ms
* select text value background has zero alpha
```scss
.md-text { @include not-selectable(); }
.md-select-value {
background-color: rgba(0,0,0,0);
}
md-backdrop {
&.md-select-backdrop {
transition-duration: 0ms;
}
}
```
Fixes #3919. Fixes #3837. Fixes #3773, Fixes #3640. Fixes #3527. Fixes #3653.
ThomasBurleson
added a commit
that referenced
this issue
Aug 6, 2015
… transitionEnd events.
replace programmatic use of element.css for style changes and use of transitionEnd event listeners with use of ngAnimate's $animateCss; use polyfill for Angular <1.4.
$mdUtil.dom.animator.translate3d() uses $animateCss() instead of waitTransitionEnd()
use animateCss.js polyfill for 'material.animate' module
- add mock `createMockStyleSheet` for animateCss tests
refactors to menu-interim-element.js and select.js
- refactor logic and patterns used
- use $animateCss in place of waitTransitionEnd()
debounce Select and Menu window resize handlers
Dialog uses same showBackdrop/hideBackdrop pattern as Menu and Select
- disable scroll before creating the backdrop
select async demo no longer clears users list when reloading
select demos use `md-input-container { margin-right: 10px;}`
hide Select Backdrop with zero duration
enable full click detection in select-value area by using background color (with zero alpa).
update use of $$rAF and $timeout in Jasmine tests
use $animateCss to animate the dropdown leave.
Jasmine tests disable animation transitions for Toast and Select
BREAKING-CHANGES: select and backdrop styles added
* select list text is not selectable,
* select backdrop hide duration is 0ms
* select text value background has zero alpha
```scss
.md-text {
@include not-selectable();
}
.md-select-value {
background-color: rgba(0,0,0,0);
}
md-backdrop {
&.md-select-backdrop {
transition-duration: 0ms;
}
}
```
Fixes #3919. Fixes #3837. Fixes #3773, Fixes #3640. Fixes #3527. Fixes #3653.
ThomasBurleson
added a commit
that referenced
this issue
Aug 6, 2015
… transitionEnd events.
replace programmatic use of element.css for style changes and use of transitionEnd event listeners with use of ngAnimate's $animateCss; use polyfill for Angular <1.4.
* $mdUtil.dom.animator.translate3d() uses $animateCss() instead of waitTransitionEnd()
* use animateCss.js polyfill for 'material.animate' module
* add mock `createMockStyleSheet` for animateCss tests
* refactors to menu-interim-element.js and select.js
* refactor logic and patterns used
* use $animateCss in place of waitTransitionEnd()
* debounce Select and Menu window resize handlers
* Dialog uses same showBackdrop/hideBackdrop pattern as Menu and Select
* disable scroll before creating the backdrop
* select async demo no longer clears users list when reloading
* select demos use `md-input-container { margin-right: 10px;}`
* hide Select Backdrop with zero duration
* enable full click detection in select-value area by using background color (with zero alpa).
* update use of $$rAF and $timeout in Jasmine tests
* use $animateCss to animate the dropdown leave.
* Jasmine tests disable animation transitions for Toast and Select
BREAKING-CHANGES: select and backdrop styles added
* select list text is not selectable,
* select backdrop hide duration is 0ms
* select text value background has zero alpha
```scss
.md-text {
@include not-selectable();
}
.md-select-value {
background-color: rgba(0,0,0,0);
}
md-backdrop {
&.md-select-backdrop {
transition-duration: 0ms;
}
}
```
Fixes #3919. Fixes #3837. Fixes #3773, Fixes #3640. Fixes #3527. Fixes #3653.
kennethcachia
pushed a commit
to kennethcachia/material
that referenced
this issue
Sep 23, 2015
… transitionEnd events.
replace programmatic use of element.css for style changes and use of transitionEnd event listeners with use of ngAnimate's $animateCss; use polyfill for Angular <1.4.
* $mdUtil.dom.animator.translate3d() uses $animateCss() instead of waitTransitionEnd()
* use animateCss.js polyfill for 'material.animate' module
* add mock `createMockStyleSheet` for animateCss tests
* refactors to menu-interim-element.js and select.js
* refactor logic and patterns used
* use $animateCss in place of waitTransitionEnd()
* debounce Select and Menu window resize handlers
* Dialog uses same showBackdrop/hideBackdrop pattern as Menu and Select
* disable scroll before creating the backdrop
* select async demo no longer clears users list when reloading
* select demos use `md-input-container { margin-right: 10px;}`
* hide Select Backdrop with zero duration
* enable full click detection in select-value area by using background color (with zero alpa).
* update use of $$rAF and $timeout in Jasmine tests
* use $animateCss to animate the dropdown leave.
* Jasmine tests disable animation transitions for Toast and Select
BREAKING-CHANGES: select and backdrop styles added
* select list text is not selectable,
* select backdrop hide duration is 0ms
* select text value background has zero alpha
```scss
.md-text {
@include not-selectable();
}
.md-select-value {
background-color: rgba(0,0,0,0);
}
md-backdrop {
&.md-select-backdrop {
transition-duration: 0ms;
}
}
```
Fixes angular#3919. Fixes angular#3837. Fixes angular#3773, Fixes angular#3640. Fixes angular#3527. Fixes angular#3653. Closes angular#3949.
|
Hi, I know this issue is closed, but just wanted to check if the alignment part of the issue is being tracked somewhere? It is still happening with the latest release on the demo site in IE11 https://material.angularjs.org/latest/demo/menu |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
After you open the menu in IE (11 + win8) you can't do anything else, the whole site gets blocked by a div and you can't select anything.
Also the alignment is completely messed up.
(You can see it on your demo page)
EDIT: Hit enter a bit prematurely
The text was updated successfully, but these errors were encountered: