fxShow is setting display:inline; in IE11 and Edge

[adamdport]

https://plnkr.co/edit/lF0h5ttXwFiOLrjIgKDr?p=preview

Discovered when using fxShow with md-menu-items. In the above plunkr, the last 4 items in the menu have fxShow on them. In IE11 and Edge, display:inline is applied to them, which ruins the layout.

[ThomasBurleson]

The fxShow works fine in Chrome and Safari. Please try the updated Menu with fxShow Demo in IE/Edge.

Will re-open issue if problem persists.

Note: the demo uses the latest build published in https://github.com/angular/flex-layout-builds... this will be released to npm as Beta.9 very soon.

[adamdport]

I tried your updated plunker in IE11 and it still seems broken. Was it working for you?

[ThomasBurleson]

Yes on Mac OS (Chrome, Safari) it looks great. What is the display property value for Item #6 ?

[adamdport]

It's still display: inline and still only on IE11 and Edge.

If you don't have access to Windows for testing, Microsoft provides virtual machine images.

[ThomasBurleson]

fxShow internally calls document.getComputedStyle('display').getPropertyValue() which finds the display:block defined in .mat-menu-item css class.

Material2 builds the CSS:

 .mat-menu-item {
  display: block;
  position: relative;
  line-height: 48px;
  height: 48px;
  padding: 0 16px;
   
  background: 0 0;
  color: rgba(0,0,0,.87);
  font-family: Roboto,"Helvetica Neue",sans-serif;
  font-size: 16px;
   
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  outline: 0;
  border: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  text-decoration: none;
}

I am confused regarding why this same code - when used in an IE11 browser - will calculate 'inline'.

[adamdport]

I just added IDs to the non-fxShowed menu items and then ran window.getComputedStyle(document.getElementById('item-1')).getPropertyValue('display'). IE11 correctly computes "block". Not sure where flex-layout is getting inline from.

[ThomasBurleson]

Are you using the latest build from https://github.com/angular/flex-layout-builds/?
See https://github.com/angular/flex-layout-builds/blob/master/bundles/flex-layout.umd.js#L834-L835:

var immediateValue = _angular_platformBrowser.ɵgetDOM().getStyle(element, 'display');
                value = immediateValue || _angular_platformBrowser.ɵgetDOM().getComputedStyle(element).getPropertyValue('display');

Can you debug with a breakpoint at this point and see what the code is doing on IE11 browser?