Material: menu: elements disappear when not in focus on IE 11

[MustafaASK]

Bug, feature request, or proposal:

menu items, in IE11, when not in focus are not visible, sometimes (screenshot attached). They appear only when hovered upon.

What is the expected behavior?

All menu items should be visible even when not in focus.

What is the current behavior?

menu items, in IE11, when not in focus are not visible, sometime

CodePen and steps to reproduce the issue:

CodePen Demo which shows your issue:

Detailed Reproduction Steps:

What is the use-case or motivation for changing an existing behavior?

Which versions of AngularJS, Material, OS, and browsers are affected?

Angular JS 1.6.9
Angular Material 1.1.8

Is there anything else we should know? Stack Traces, Screenshots, etc.

Screenshot attached.

[svenank3r]

It seems like i have found a part of the problem, as with a small css change i was able to make it work in IE11.

By disabling the transition on the menu content, like so :
.md-active.md-open-menu-container > md-menu-content > * { transition: none; }

I am not sure if this the actual solution to the problem, but it can be a temporary solution while the problem is being adressed.

I am using:
Angular 1.6.8
Angular Material 1.1.6

[Splaktar]

Can anyone provide consistent reproduction steps for this?

I tested on 1.1.6 and briefly saw only the first menu item drawn, but within a second later, all of the items were displayed and continued to display properly.

I tested on 1.1.8 and 1.1.10 and I wasn't able to reproduce it at all.

This looks like an IE 11 bug. The fix mentioned above may work for you if you want a targeted workaround.

You can find a more comprehensive set of CSS animation disabling rules here. Those can help with IE 11 performance until we can come up with a mode where all animations can be disabled (https://github.com/angular/material/issues/865).

[svenank3r]

I cannot provide consistent reproduction steps. I tried to create a JsFiddle/CodePen/etc... but they all don't work in IE11 or don't support IE11 anymore.

All I can say is that i can still reproduce the problem in my application. The only case where the menu does work (and gives similair results to yours), is if the md-menu is used within a md-list.

I am using Angular 1.7.2 and Angular Material 1.1.10 right now.

[Splaktar]

Thank you for the feedback.

FYI: You can create a CodePen with Chrome and then view the Debug mode in IE11 for testing.

[svenank3r]

Created a CodePen with Debug mode, but couldn't reproduce the issue.

I could however (sort of) reproduce the issue on the material website (in IE11). I switched to the 1.1.6 version, opened the demo of the menu and pressed the menu of the first example. Resulting in the following:

I can reproduce the issue within release 1.1.6, 1.1.7 and 1.1.8. Once you move your mouse/hover over the menu items, they will all appear and the problem will be unable to reproduce unless you change to one of the other mentioned versions.

Maybe in this way you will be able to reproduce the problem.

[ShaikASK]

Thanks @svenank3r & @Splaktar .
The temporary fix (disabling the transition) works great.

[Splaktar]

@MustafaASK and @svenank3r can you please provide your version of Windows and IE11?

[svenank3r]

• IE11 version 11.0.9600.19078
• Windows version: 8.1 Enterprise / Version 6.3 (Build 9600)

[Splaktar]

@svenank3r OK, that might explain why we are seeing differences. I'm running the latest Windows 10 build with the latest IE11.

It looks like the Windows version that you are running is from the October 17, 2013 to April 8th, 2014 time frame and the IE version is the latest Windows 7/8/8.1 patch. It looks like Windows 8.1 reached End of Life (EOL) on January 9, 2018.

[Splaktar]

Here's the latest IE11 patched version that is on Windows 10 now:
IE Version: 11.285.17134.0
Update Version: 11.0.85 (KB4457426) from 9/11/2018

I'm not exactly sure at what point this was fixed in IE11, but it appears that it might have been fixed sometime in the last few years on the Windows 10 branch only.

Is anyone seeing this problem running Windows 10? If so, can you please post your IE and Update version?

Can others confirm this on Windows 8.1 or Windows 7?

[Splaktar]

This looks like it's specific to very old EOL'd versions of IE11. A workaround is provided and patches to IE11 are available for non-EOL'd versions of Windows. Closing as no feedback has been provided and the workaround seems to be acceptable.

[grokgit]

I noticed that problem occurs when right scroll is enabled on IE11 for example when page is too long to fit in window height.

IE11 version: 11.1268.16299.0
Win10 version: 10.0.16299 Build 16299

Thank you svenank3r. Turning off the transition improved visibility of items in menu.