md-progress-linear: IE 11 Flickering, Constant resizing of md-dialog container width

[Londovir]

Relevant CodePen: http://codepen.io/londovir/pen/PwMMZJ

Under Chrome, an md-progress-linear that is embedded within an md-dialog component will show a slightly resizing (likely due to the transformX/scale CSS transformation done for a "determinate" style md-progress-linear) every time the attached value attribute is changed. However, the overall outer md-dialog will not resize accordingly. In addition, there is no apparently "flicker" of the darker colored progress bar portion as it is redrawn/resized by the CSS transformation - it smoothly glides smaller or larger.

Under IE 11, the exact same CodePen is causing multiple issues. The dark color "value bar" flickers out of existence before coming back, making for a jarring visual experience. In addition, the outer md-dialog component visually resizes in the horizontal (and often vertical) directions, causing a noticeable "shiver" of the md-dialog component it's embedded within. We have tried various combinations of wrapping different elements in outer DIVs with various attributes to try and prevent this layout resizing from taking place, but nothing has yet worked that doesn't mandate a fixed size for the outer md-dialog, which we are trying to avoid if possible.

[Splaktar]

Just tested this out with the latest master and all of the flickering and shivering appears to be gone. @Londovir can you please confirm this?

[Londovir]

@Splaktar - Wish I could confirm, but I still have it in the horizontal direction in the CodePen I referenced and with IE 11 (v11.0.9600.17842). Here's a GIF of what I'm seeing on my screen under IE11:

IE11

It is definitely still flickering in the horizontal direction. You can see the effect on the entire dialog layout by looking at the buttons, especially, along with the slight blurring of the text as well. I'm referencing the bower-material master, so I presume I'm pulling the most recent commit in this CodePen. Please note that the flashing of the darker portion of the progress bar is not an artifact due to the GIF creation, but is what I'm actually seeing in IE11. In Chrome, although I do not have the overall dialog box flickering in the horizontal direction, there is a shrinking and growing by a pixel or two that is happening. It is subtle, but can be seen if you look closely (paricularly at the lighter colored right edge of the progress bar, and how it aligns with the end of the text line above it):

Chrome

I believe in Chrome this is "absorbed" by the layout which doesn't cause the dialog itself to horizontally resize, but in IE11 this constant changing of the width (?) of the bar by a pixel back and forth is causing the horizontal resizing you see in the GIF. What is interesting is I don't see this resizing behavior in Chrome on the demo page for the MD project...just in the custom dialog in my CodePen, so there must be something happening in my layout for the problem to be triggered.

Thanks.

[Splaktar]

@Londovir I am not seeing that on Windows 7 with IE 11. What version of Windows are you running? Do you have all of the latest Windows Updates applied? I'll look into this a little more when I have some time.

[Londovir]

You may be on to something. I just checked a Windows 7SP1 x86 VM I have running IE11 (11.0.9600.17843), and it is rock steady as expected. I don't even get the odd vertical 1px change in progress bar height like I see in Chrome as you see above. I will check my Win10 Insider Edge VM tomorrow at work to see if it is being replicated there. It does appear in my Win8.1 IE (Metro Mode) as well - and on more than one Win8.1 machine - so it is unlikely to be a specific graphics card driver or some other issue that I can think of, as it is happening on a variety of Win8.1 machines.