Material: md-dialog: IE11 / Edge blurry text and buttons after animating onto screen

[Londovir]

I don't have a ready CodePen for this at the moment, but I do have some screenshots of what I'm describing. When IE11 or Edge finishes animating in an md-dialog element, the resulting dialog appears fuzzy and blurred when compared to Chrome and Firefox:

IE 11 Image

Chome Image

Edge Image

Firefox Image

I imagine this is an artifact of the CSS styling that is done to animate the md-dialog into place, and it isn't likely to be something easy to fix or a high priority either. I just wanted to report it because in our limited testing for our apps here, we've been getting users reporting it (along with complaints about how they think their eyesight is going bad until they switch to Firefox or Chrome).

[popshift]

+1

[Bodom78]

Having the same issue on Windows 10 with IE11

[ryanespin]

+1

[Bodom78]

I'll also add that this issue does not occur for me when using IE11 in Windows 7

[Belicosus]

I am having the same problem on Win 8.1 and Win 10, but it also applies to the content of a sidenav directive. I'm currently trying to reproduce this in a codepen, but it's not looking good at the moment.

Problem is, that the demo's on the website doesn't seem to have the same issue.

[Bodom78]

Turns out the transform rule from transition in css is the cause.

Using IE's DOM explorer and removing or setting transform to none clears the bury text.

md-dialog.md-transition-in {
    transform: translate3d(0px, 0px, 0px) scale(1);
}

[Bodom78]

Using translate rather then translate3D also fixes the issue.

https://github.com/Polymer/core-list/pull/71

[jmrserrano]

-ms-transform:translateZ(0) scale(1.0, 1.0); not work is fuzzy used -ms-transform:translate(0) scale(1.0, 1.0); is solved