Covalent: Button Issue in Stepper with IE11

[Blankinfinity]

First off I know that IE11 isn't support but I am hoping someone can help or point me in the right direction to fix this.

Bug Report

When using the stepper in IE11 if you click a button (e.g. in the required state step), it momentarily shifts position and then back again. I have managed to fix a few other issues i was having with layouts etc and flex for my project using Covalent but I am stumped with this one. I'm wondering if this has something to do with the ripple effect?

Screenshot

What is the expected behavior?

Button should not move position when clicking it.

What is the motivation / use case for changing the behavior?

UI issue, a user of the web app should not see the button moving position it should be fixed.

Which version of Angular and Material, and which browser and OS does this issue affect?

Angular 4.1.1
Material 2.0.0-beta.3

[emoralesb05]

Does it happen when you click on Cancel too?..

Trying to figure out if its a stepper state change or the actual click that give that effect.

[Blankinfinity]

I can confirm it does not happen when the Cancel is clicked

[mcstepp]

I'm working on a lot of IE11 support issues, so I'll take a look at this later today.

[mcstepp]

Unfortunately, I can't reproduce this locally. @Blankinfinity you mentioned that you've made some other IE11 fixes. If you have a branch on github, I'll pull it down and take a look. Maybe some of the other fixes are breaking the stepper. (Animation is bit janky, but I'm working from a VM for IE 11)

[Blankinfinity]

@mcstepp I have made changes to a project for the company i work for so sadly i can't put any of that on github, however that gif was recorded from the main covalent website https://teradata.github.io/covalent/#/components/steps here, so no changes made by myself and that is the behaviour I am seeing.

[Blankinfinity]

It doesn't appear to be just related to the stepper component either, I just checked other pages with buttons and I also see it happening on https://teradata.github.io/covalent/#/components/file-upload.

[Blankinfinity]

@mcstepp I think this might be a Material problem? if i change from md-raised-button to a flat md-button the issue goes away

https://github.com/angular/material2/issues/3731

[mcstepp]

Interesting. I still can't reproduce it from the source on IE11.

[Blankinfinity]

@mcstepp Just to let you know I am testing on Windows 10s IE11, i have seen subtle differences with behaviour between the version on Windows 7. I have just tried it on a virtual Windows 7 machine and it behaves as expected. God knows what IE11 in Win 10 is doing!

[mcstepp]

Good point. I was just about to ask you which OS you were using. I was testing on Windows 7 with IE11. I'll grab a Win 10 machine and see if I can apply any fixes. With it being a dependency issue, it may be best to wait until the owner's fix it. In the mean time, I'll check out those links and see if they include other fixes. I saw one for the button in one (the overflow), and also using the flat button as you mentioned earlier. Keeping this on my radar since my application has to support Windows 10 also.

[Blankinfinity]

Just in case there are any differences between windows 10 versions I have replicated this on 1607 and 1703.

[mcstepp]

Very interesting. I'm testing now with Windows 10 version 1607 on IE11 (physical, not virtual) and I still can't reproduce it. I'll try it again on a VM.

[Blankinfinity]

Morning, for now until a fix can be found i've disabled ripple effects using MD_RIPPLE_GLOBAL_OPTIONS.

Information on how to use it can be found here https://github.com/angular/material2/blob/master/src/lib/core/ripple/README.md

This has fixed the issue i was seeing but ideally I would love to have the ripple effects working.

[Blankinfinity]

@mcstepp I have tried this on my 1607 machine at work today and the issue does not occur (although i could have sworn it did), so looks like it might be a problem in 1703 only

[kyleledbetter]

Hey folks I'm testing for IE11 fixes and can't reproduce any of these issues. I'm thinking it must have been an upstream fix in Angular Material for the ripple.

Can anyone else test and confirm?

[Blankinfinity]

@kyleledbetter I'll update to the latest version and check it out to see if it is still a problem and get back to you.

[emoralesb05]

Closing this since we couldnt replicate it and its not a covalent specific issue